最新版react脚手架 creact-react-app 使用less，配置less-loader教程

在使用creact-react-app脚手架时，会有到less去自定义样式，因为脚手架中的打包工具webpack更新原因，使用【eject】暴露出webpack文件后，只保留了两个文件：webpack.config.js和webpackDevServer.config

以前只需要分别修改本地和线上的webpack文件，现在只需要修改webpack.config.js即可

 

利用npm 或者yarn 安装less和less-loader.js  注意，这里是安装两个插件

安装完成后在webpack.config.js增加常量：

再在 cssModuleRegex 和 sassModuleRegex 之间添加如下代码：

// 编译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'
   ),
},

重新启动项目后生效：