使用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的顏色，再重啓項目便可更改主題顏色