При использовании customize-cra для переопределения antd less переменная создает несколько повторяющихся css файлов при сборке - PullRequest
Новая
       11

При использовании customize-cra для переопределения antd less переменная создает несколько повторяющихся css файлов при сборке

1 голос
/ 26 января 2020

Я использую customize-cra для переопределения переменной antd less, но при сборке создается несколько дубликатов CSS файлов.

Как уже упоминалось в документах antd https://ant.design/docs/react/use-with-create-react-app#Advanced -Guides

если я использую импорт по умолчанию CSS, например,

@ import '~ antd / dist / antd. css';

, который он производит только 1,5 МБ (включая мои пользовательские CSS) из CSS файлов после сборки.

Затем я удаляю @import '~ antd / dist / antd. css';

И я использовал custom-cra, как этот код. 

const { override, fixBabelImports, addLessLoader } = require('customize-cra');
const overrideVariables = require('./src/styles/overrideVariables');

module.exports = override(
 fixBabelImports('import', {
   libraryName: 'antd',
   libraryDirectory: 'es',
   style: true,
 }),
 addLessLoader({
   javascriptEnabled: true,
   modifyVars: overrideVariables,
 }),
);

Это производит 6MB (включая мой пользовательский CSS) для CSS файлов после build.

Я использую это неправильно или другое решение для этого?

1 Ответ

0 голосов
/ 26 января 2020

Я бы порекомендовал использовать craco . Существует плагин craco-antd , который прекрасно работает и делает именно то, что вам нужно.

craco.config. js

module.exports = {
  plugins: [
    {
      plugin: require('craco-antd'),
      options: {
        lessLoaderOptions: {
          noIeCompat: true
        }
      }
    }
  ]
};

И тогда вы можете добавить свои переменные в antd.customize.less 

@primary-color: #1da57a;
@link-color: #1da57a;
...