antd + react + less 配置

yarn create react-app antd-demo-ts --template typescript
yarn add babel-plugin-import
yarn add less-loader less

yarn eject 暴露
配置package.json

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

配置 webpack.config

  //  新增
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;  

//修改添加lessOptions因为less6.20配置不同
const getStyleLoaders = (cssOptions, preProcessor, lessOptions) => 
if (preProcessor) { //当preProcessor存在即新增loader
  {
          loader: require.resolve(preProcessor),
          options: { ...cssOptions, ...lessOptions },//只有在less中合并lessOptions。假如不单独新增lessOptions参数，与cssOptions合并在一起就会报错，因为是函数集中处理会为其它loader添加lessOptions配置，而6.2.0的配置与其它不同
        }
}

//新增

  {
              test: lessRegex,
              use: getStyleLoaders(
                {
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                },
                "less-loader",
                {
                  lessOptions: {
                    javascriptEnabled: true,
                  },
                }
              ),
              sideEffects: true,
            },
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                },
                "less-loader",
                {
                  lessOptions: {
                    javascriptEnabled: true,
                  },
                }
              ),
            },