Как настроить дизайн Ant с помощью Webpack

Вы читаете эту статью, поэтому я предполагаю, что вы используете фреймворк Ant Design в своем замечательном приложении React. Ant Design — действительно замечательный фреймворк, и его легко настроить. Как вы, возможно, знаете, Ant Design написан на TypeScript и меньше. Я не большой поклонник Less и предпочитаю Sass. Чтобы настроить тему Ant Design, мы добавим загрузчик Less. У загрузчика Less есть опция «modifyVars», которая позволяет нам изменять значения переменных в стилях Less.

1- Сначала установите Less loader:

$ npm install --save-dev less-loader less

2- Затем добавьте загрузчик Less в конфигурацию Webpack: (если у вас уже есть загрузчик Less, вы можете изменить тестовое значение и настроить Webpack для поиска только в папке antd в node_modules, вы также можете использовать опцию исключения загрузчика)

{
  test: /\.less$/,
  use : [
    {
      loader: 'style-loader'
    },
    {
      loader: 'css-loader'
    },
    {
      loader: 'less-loader',
      options: {
        // Ant Design variables which you want to customize
        modifyVars: {
           "primary-color": "#1c6ee6"
        }
        // You can create a json file named ant-theme.json and use it this way:
        // modifyVars: require('./PATH_TO_FILE_ant-theme.json_FILE')
      }
    }]
}