create-react-app配置antd主题色

配置antd主题色过程中踩了不少坑。记录以下遇到的一些问题：

本实例解决方案是通过craco+craco.config.js+craco.less来实现的。

基本步骤：

（1）安装@craco/craco和craco-less

（2）修改package.json的script配置为

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

（3）在src目录下的index.js文件中引入

     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: #ff8c00 },
              javascriptEnabled: true,
            },
          },
        },
      },
    ],
  };

以下是几个踩坑的点：

1 修改package.json的script配置和新建craco.config.js以后，重新启动会报错：

Erroe:Cannot find module react-scripts/package.json

解决方法：npm i react-scripts

2 在index.js中引入“antd/dist/antd.less"会报错 Cannot find module"~antd/dist/antd.less".但是如你改成“antd/dist/antd.css”则正常显示的问题

解决方法：重新启动。清理缓存再启动下就可以了

方法二：更改create-react-app配置实现：

特别注意less/less-loader版本问题，这里坑很多：经过多方测试，

"less": "4.1.1",

"less-loader": "^5.0.0",可以正常运行。

在script文件夹的webpack.config.js中对postcss-loader做如下更改：

{
        loader: require.resolve(postcss-loader),
        options: {
          ident: postcss,
          plugins: () => [
            require(postcss-flexbugs-fixes),
            require(postcss-preset-env)({
              autoprefixer: {
                flexbox: no-2009,
              },
              stage: 3,
            }),
            postcssNormalize(),
          ],
          sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
        },
      },
    ].filter(Boolean);
    if (preProcessor) {
      if (preProcessor === "less-loader") {
        loaders.push({
          loader:require.resolve(preProcessor),
          options:{
            sourceMap: isEnvProduction&&shouldUseSourceMap,
            modifyVars:{
              primary-color: #ff8c00,
              "ant-btn-primary":"#ff8c00"
            },
            javascriptEnabled:true
          }
        })
      }else{
        loaders.push(
          {
            loader:require.resolve("resolve-url-loader"),
            options:{
              sourceMap: isEnvProduction && shouldUseSourceMap,
            }
          },
          {
            loader:require.resolve(preProcessor),
            options:{
              sourceMap:true
            }
          },
        )
      }
      
    }
    return loaders;
  };

在if (preProcessor) 中添加对less-loader的判断，单独处理，添加modifyVars即可实现主题色更改