1：使用croco管理antd主题配置

 

yarn add @craco/craco
yarn add craco-less

2：修改package.json文件

"scripts": {
-   "start": "react-scripts start",
-   "build": "react-scripts build",
-   "test": "react-scripts test",
+   "start": "craco start",
+   "build": "craco build",
+   "test": "craco test",
}

3：src/index.css文件改为src/index.less,然后修改样式引用为 less 文件。

 src/index.tsx

- import './index.css';
+ import './index.less';

 src/index.less

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

4：然后在项目根目录创建一个 craco.config.js 用于修改默认配置。

修改主题样式

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

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

这里利用了 less-loader 的 modifyVars 来进行主题配置，变量和其他配置方式可以参考 配置主题 文档。修改后重启 yarn start.