使用ReactJs更改Ant Design变量

问题描述

我在应用程序中使用antd库.根据[文件] [1][1]:https://ant.design/docs/react/customize-theme

I am usiing antd library in my application. According to the [documentation][1][1]: https://ant.design/docs/react/customize-theme

我可以通过更改以下变量来自定义主题:

i can customize the theme by changing the variables like:

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

我在我的react应用程序中做了这样的事情，添加了文件 webpack.config.js 和其中的下一个代码:

I did something like this in my react application adding the file webpack.config.js and the next code inside:

// 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,
                    },
                },
            },
        ],
    }]
}

但是颜色不会改变.为什么以及如何解决?

But the colors don't change. Why and how to solve it?

推荐答案

在 create-react-app

中使用 craco

要使 webpack.config.js 生效，您必须从 create-react-app 弹出. craco 包解决了此问题，如官方指南.

Using craco in create-react-app

For webpack.config.js to take effect, you would have to eject from create-react-app. The craco package solves this problem as described in the official guide.

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

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

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

3.在项目根目录中创建 craco.config.js

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

这篇关于使用ReactJs更改Ant Design变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！