Ant Design全局改变主题色

[machao07]

1、安装[email protected]

• yarn add @craco/[email protected]
• 新版本目前react-scripts3.4.3不支持

/* package.json */
"scripts": {
-   "start": "react-scripts start",
-   "build": "react-scripts build",
-   "test": "react-scripts test",
+   "start": "craco start",
+   "build": "craco build",
+   "test": "craco test",
}

2、安装craco-less

yarn add craco-less

将index.js文件 antd.css改成 .less

- @import '~antd/dist/antd.css';
+ @import '~antd/dist/antd.less';

3、覆盖原有配置

新建craco.config.js文件，重启项目

const CracoLessPlugin = require('craco-less');
module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@primary-color': '#1DA57A' },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};