Question

我正在关注官方docs，但对我不起作用。我安装了less，less-loader和custom-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

您可以尝试将第一行更改为：

    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"
  },

Answer 2

有关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
    })
);

定制Ant设计主题

2 个答案: