为了在react中使用antd以及它的主题更改，需要在项目中 yarn eject 暴露出webpack文件进行改造

本答案是在日期当时最新的create-react-app上的webpack版本

less-loader的配置

安装less less-loader两个包

yarn add less less-loader

//配置less的变量const lessRegex = /\.less$/;const lessModuleRegex = /\.module\.less$/; //less配置(模仿css的配置改写)                       {              test: lessRegex,              exclude: lessModuleRegex,              use: getStyleLoaders({                  importLoaders: 2,                  sourceMap: isEnvProduction && shouldUseSourceMap,              }, 'less-loader'),          },          {              test: lessModuleRegex,              use: getStyleLoaders({                  importLoaders: 2,                  sourceMap: isEnvProduction && shouldUseSourceMap,                  modules: true,                  getLocalIdent: getCSSModuleLocalIdent,              },'less-loader'),          },

设置后可以新建less文件用简单样式去检测是否生效，要记得重启项目。

Babel-plugin-import(antd的按需加载设置)

安装插件

yarn add babel-plugin-import

修改package.json(或新建文件.babellrc进行编辑，但两者只能存一种)

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

根据webpack配置更改antd主题颜色

在webpack.config.js中找到preProcessor

    //原配置    if (preProcessor) {      loaders.push({        loader: require.resolve(preProcessor),        options: {          sourceMap: isEnvProduction && shouldUseSourceMap,        },      });    }

注释后更改为

    /**     * 定义全局样式配置     */    if (preProcessor) {      let loader = require.resolve(preProcessor)      if(preProcessor === 'less-loader') {        loader = {          loader,          options: {            modifyVars: {              //自定义主题              'primary-color': '#1890ff',            },            javascriptEnabled: true,          }        }      }      loaders.push(loader);    }    return loaders;  };

只需修改primary-color的颜色，再重启项目即可更改主题颜色