react eject后，antd定制主题(webpack)。

第一种用的使用官方推荐的craco，创建一个craco.config.js进行配置，都有说明。

之后我把项目yarn  eject之后，craco.config.js的配置就不生效了。antd推荐的craco start什么的也都失效了。然后开始上网搜索配置教程（之前不知道有官方说明。哎，大意了。。。）。

记录下我自己配置的代码,yarn reject会暴露出scripts文件夹和config文件夹，在config/webpack.config.js首先配置下less。上面有css和sass的，直接照猫画虎定义两个变量lessRegex和lessModuleRegex。贴下自己的代码：

最后两行是自己加的。

const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
const lessRegex = /\.(css|less)$/;
const lessModuleRegex = /\.module\.(css|less)$/

  就模仿官方的把自己的配置加上去就可以。

            {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                },
                'less-loader'
              ),
              sideEffects: true,
            },
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: {
                    getLocalIdent: getCSSModuleLocalIdent,
                  },
                },
                'less-loader'
              ),
            },

这个就是定制主题的部分。

 if (preProcessor) {
      loaders.push(
        {
          loader: require.resolve('resolve-url-loader'),
          options: {
            sourceMap: isEnvProduction && shouldUseSourceMap,
          },
        },
        {
          loader: require.resolve(preProcessor),
          options: {
            sourceMap: true,
            lessOptions: preProcessor === 'less-loader' ? {
              modifyVars: {
                'primary-color': '#8ABB64', // 自己配置的主题
              },
              javascriptEnabled: true,
            } : null
          },
        }
      );
    }
    return loaders;
  };

 package.json加上

 "babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "import",
        {
          "libraryName": "antd",
          "libraryDirectory": "es",
          "style": true
        }
      ]
    ]
  },

yarn add babel-plugin-import  按需引入。

运行成功打开浏览器，基本上就可以看到了。

本文地址：https://blog.csdn.net/f980815/article/details/109385835