Less и его конфигурация

Библиотека Ant Design использует препроцессор Less в качестве основной технологии для стилизации компонентов. Все стили интерфейса — цвета, отступы, размеры элементов, тени, типографика — определяются через переменные Less и компилируются в обычный CSS во время сборки проекта.

Использование Less позволяет:

централизованно управлять визуальной системой интерфейса;
легко изменять тему приложения;
создавать собственные дизайн-системы на базе Ant Design;
переопределять стили без ручного переписывания CSS.

Система переменных Ant Design является фактически дизайн-токенами, которые определяют внешний вид всех компонентов.

Основные возможности Less

Less — это CSS-препроцессор, расширяющий стандартный CSS дополнительными возможностями.

Ключевые функции:

1. Переменные

@primary-color: #1677ff;
@font-size-base: 14px;

Переменные используются для хранения значений, применяемых во многих местах.

2. Вложенность

.button {
  color: white;

  &:hover {
    opacity: 0.8;
  }
}

Позволяет структурировать стили подобно иерархии HTML.

3. Миксины

.border-radius(@radius) {
  border-radius: @radius;
}

.card {
  .border-radius(8px);
}

Миксины позволяют повторно использовать наборы правил.

4. Математические операции

@padding: 16px;

.container {
  padding: @padding * 2;
}

5. Импорт файлов

@import "variables.less";
@import "mixins.less";

Структура стилей Ant Design

Исходные стили библиотеки организованы следующим образом:

antd/
 ├─ es/
 ├─ lib/
 └─ style/
      ├─ index.less
      ├─ themes/
      │    ├─ default.less
      │    └─ compact.less
      └─ core/

Основные элементы:

index.less

Главный файл стилей, который импортирует остальные.

themes/default.less

Файл с базовыми переменными темы.

компонентные стили

Каждый компонент имеет собственный файл Less:

button/style/index.less
table/style/index.less
form/style/index.less

Эти файлы используют глобальные переменные темы.

Система переменных Ant Design

Большая часть кастомизации Ant Design осуществляется через Less-переменные.

Основные цветовые переменные

@primary-color: #1677ff;
@success-color: #52c41a;
@warning-color: #faad14;
@error-color: #ff4d4f;
@info-color: #1677ff;

Эти переменные определяют цветовую палитру интерфейса.

Типографика

@font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
@font-size-base: 14px;
@heading-color: rgba(0, 0, 0, 0.85);
@text-color: rgba(0, 0, 0, 0.85);

Размеры и отступы

@padding-lg: 24px;
@padding-md: 16px;
@padding-sm: 12px;
@padding-xs: 8px;

Радиусы

@border-radius-base: 6px;
@border-radius-sm: 2px;

Тени

@box-shadow-base: 0 2px 8px rgba(0,0,0,0.15);

Компиляция Less в проекте

Для корректной работы Ant Design необходимо настроить сборку, поддерживающую компиляцию Less.

Наиболее распространённые варианты:

Webpack
Vite
Create React App (с кастомизацией)
Next.js

Настройка Less в Webpack

Для Webpack требуется установить загрузчики.

Установка зависимостей

npm install less less-loader --save-dev

Конфигурация webpack

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "less-loader",
            options: {
              lessOptions: {
                javascriptEnabled: true
              }
            }
          }
        ]
      }
    ]
  }
};

Параметр javascriptEnabled: true обязателен для корректной работы Ant Design.

Переопределение переменных темы

Основная цель использования Less в Ant Design — кастомизация темы.

Изменение primary color

{
  loader: "less-loader",
  options: {
    lessOptions: {
      modifyVars: {
        "primary-color": "#722ed1"
      },
      javascriptEnabled: true
    }
  }
}

После компиляции весь интерфейс будет использовать новый основной цвет.

Изменение нескольких переменных

modifyVars: {
  "primary-color": "#1DA57A",
  "border-radius-base": "4px",
  "font-size-base": "15px"
}

Использование отдельного файла переменных

Для удобства переменные часто выносятся в отдельный файл.

variables.less

@primary-color: #1da57a;
@border-radius-base: 4px;
@font-size-base: 15px;

Импорт переменных

modifyVars: {
  hack: `true; @import "src/styles/variables.less";`
}

Это позволяет централизованно управлять темой.

Настройка Less в Vite

Современные проекты часто используют Vite.

Установка

npm install less

vite.config.js

import { defineConfig } from "vite";

export default defineConfig({
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
        modifyVars: {
          "primary-color": "#1890ff"
        }
      }
    }
  }
});

Настройка Less в Create React App

Create React App не поддерживает Less из коробки. Для этого используется craco или react-app-rewired.

Установка CRACO

npm install @craco/craco

craco.config.js

module.exports = {
  style: {
    less: {
      loaderOptions: {
        lessOptions: {
          modifyVars: {
            "@primary-color": "#1890ff"
          },
          javascriptEnabled: true
        }
      }
    }
  }
};

Глобальные стили через Less

Less может использоваться не только для переопределения темы, но и для создания собственных глобальных стилей.

Пример

@import "~antd/dist/antd.less";

.app-container {
  padding: 24px;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
}

Динамическая тема

В некоторых приложениях требуется переключение темы во время работы приложения.

Ant Design допускает динамическую замену переменных.

Для этого используется библиотека:

less.js

или специализированные решения:

antd-theme-generator

Пример динамического изменения цвета:

window.less.modifyVars({
  "@primary-color": "#ff4d4f"
});

После выполнения произойдёт перекомпиляция стилей.

Использование color palette

Ant Design автоматически генерирует оттенки основного цвета.

Если задать:

@primary-color: #1890ff;

библиотека создаёт палитру:

@primary-1
@primary-2
@primary-3
...
@primary-10

Это используется в:

hover состояниях
границах
фонах
активных элементах

Переопределение стилей компонентов

Иногда необходимо изменить стили конкретного компонента.

Пример изменения кнопки

.ant-btn {
  border-radius: 8px;
}

Пример изменения таблицы

.ant-table {
  font-size: 13px;
}

Scoped стили

Less может использоваться внутри CSS-модулей.

Пример:

Button.module.less

.button {
  background: red;
}

Импорт:

import styles from "./Button.module.less";

<button className={styles.button}>Click</button>

Это предотвращает конфликты глобальных стилей.

Импорт стилей Ant Design

Есть два основных способа подключения стилей.

1. Глобальный CSS

import "antd/dist/antd.css";

Недостаток — невозможность кастомизации.

2. Less версия

import "antd/dist/antd.less";

Позволяет изменять переменные.

Tree Shaking стилей

При использовании babel-plugin-import можно подключать стили только используемых компонентов.

[
  "import",
  {
    libraryName: "antd",
    libraryDirectory: "es",
    style: true
  }
]

Опция style: true означает использование Less.

Производительность сборки

Компиляция Less может замедлять сборку больших проектов.

Для оптимизации применяются:

кэширование loader’ов
разделение стилей
использование CSS-in-JS (в Ant Design v5)

Переход от Less к Design Tokens

В новых версиях Ant Design часть системы стилизации переходит к Design Tokens и CSS-in-JS.

Тем не менее Less остаётся важным для:

поддержки старых проектов
глубокой кастомизации темы
работы с legacy кодовой базой

Типичные ошибки конфигурации

Ошибка javascriptEnabled

Inline JavaScript is not enabled

Решение:

javascriptEnabled: true

Ошибка путей

Cannot find module antd/dist/antd.less

Причины:

неправильная версия библиотеки
некорректная конфигурация сборщика

Конфликт CSS и Less

Подключение одновременно:

antd.css
antd.less

может привести к дублированию стилей.

Практика организации темы

Наиболее устойчивый подход:

Создать файл переменных
Подключить его в конфигурации Less
Использовать переменные во всех стилях