Настройка темы Ant Design

Question

Я слежу за официальными документами , но у меня это не работает.Я установил less, less-loader и customize-cra, а затем добавил config-overrides.js в корневой каталог приложения React.config-overrides.js выглядит следующим образом:

import { addLessLoader, fixBabelImports, override } from 'customize-cra'

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: {
      '@primary-color': '#1DA57A',
      '@link-color': '#1DA57A',
      '@success-color': '#1DA57A',
      '@warning-color': '#1DA57A',
      '@error-color': '#1DA57A'
    }
  })
)

Цвета в приложении по-прежнему являются цветами по умолчанию для Ant Design.Что мне не хватает, пожалуйста?

Спасибо.

Answer 1

Документация по antd / antd-mobile неверна.Вам необходимо выполнить fixBabelImports следующим образом:

// config-overrides.js
const {
    override,
    disableEsLint,
    addLessLoader,
    fixBabelImports
} = require('customize-cra');

module.exports = override(
    fixBabelImports('antd-mobile', {
            libraryDirectory: 'es',
            libraryName: 'antd-mobile',
            style: true
    }),
    fixBabelImports('antd', {
        libraryDirectory: 'es',
        libraryName: 'antd',
        style: true
    }),
    disableEsLint(),
    addLessLoader({
        javascriptEnabled: true
    })
);

Answer 2

Вы можете попробовать изменить первую строку на:

    const { override, fixBabelImports, addLessLoader } = require("customize-cra");

Если это не сработает, убедитесь, что вы установили babel-plugin-import и react-app-rewired, а затем измените следующее

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  },