@craco/craco改变主题颜色

1. 安装craco

yarn add @craco/craco

2. 修改 package.json中的scripts

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

3. 在项目根目录创建一个craco.config.js , 并添加以下代码

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

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

5. 把 src/App.css 文件修改为 src/App.less，然后修改样式引用为 less 文件

//引入antd的css样式
// import 'antd/dist/antd.css';
//craco修改引入的样式
import 'antd/dist/antd.less';

成功的把主题换成绿色了