使用less-loader与antd按需加载(babel-plugin-import)的坑

为了在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的颜色，再重启项目即可更改主题颜色