使用 ReactJs 更改 Ant Design 变量

Question

我在我的应用程序中使用antd库。根据文档，我可以通过更改变量来自定义主题，例如：

modifyVars: {
  "primary-color": "#EB564F",
   "link-color": "#0DD078",
   "success-color": "#0DD078",
   "border-radius-base": "40px",
}

我在我的反应应用程序中做了类似的事情，添加了文件webpack.config.js和其中的下一个代码：

// webpack.config.js
const antdRegex = /antd.+\.less$/;

module.exports = {
rules: [
    {
        test: antdRegex,
        loader: [
            "style-loader",
            "css-loader",
            {
                loader: "less-loader",
                options: {
                    lessOptions: {
                        modifyVars: {
                            "primary-color": "#EB564F",
                            "link-color": "#0DD078",
                            "success-color": "#0DD078",
                            "border-radius-base": "40px",
                        },
                        javascriptEnabled: true,
                    },
                },
            },
        ],
    }]
}

但颜色不会改变。为什么以及如何解决？

Answer 1

使用craco于create-react-app

为了webpack.config.js生效，您必须退出create-react-app。该craco软件包按照官方指南中的描述解决了这个问题。

craco1.使用npm安装相关包

npm install --save-dev @craco/craco craco-less

2. 将.css导入更改为.less

/* src/App.js */
import './App.css' -> './App.less';

/* src/App.less */
@import '~antd/dist/antd.css' -> '~antd/dist/antd.less';

craco.config.js3.在项目根目录下创建

const CracoLessPlugin = require("craco-less");

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: {
              "primary-color": "#EB564F",
              "link-color": "#0DD078",
              "success-color": "#0DD078",
              "border-radius-base": "40px",
            },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};

4. 更新脚本package.json

"scripts": {
  "start": "craco start",
  "build": "craco build"
  "test": "craco test"
}

5. 完成