定制Ant设计主题

Question

我正在关注官方的docs，但它对我不起作用。我安装了less，less-loader和customize-cra，然后我在React应用的根目录下添加了config-overrides.js go。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"
  },