react脚手架中使用less

前几天用react写后台的时候，想着用用less，因为之前一直都用的是sass，这次换一下，兴高采烈地使用脚手架搭建完项目，写入less的时候，run起来一看，不生效！！！啥也没有

摸索了半天也没头绪，于是就在终端中npm run eject发现竟然没有less相关的loader，然后我又兴高采烈的npm安装less相关依赖，再次run一下，还是没效果，去github上看了下，原来还需要再次配置
主要修改的地方如下图

**

添加完这个之后，再去修改下一个地方：

**

let preProcessorRule = {
        loader: require.resolve(preProcessor),
        options: {
          sourceMap: true
        }
      }
      if (preProcessor === 'less-loader') {
        // eslint-disable-next-line no-unused-vars
        preProcessorRule = {
          loader: require.resolve(preProcessor),
          options: {
            sourceMap: true,
            lessOptions: {
              javascriptEnabled: true,
              modifyVars: {
                'primary-color': '#346fff', // 全局主色
                'link-color': '#346fff', // 链接色
                // https://github.com/ant-design/ant-design/issues/11422#issuecomment-408652273
                'menu-collapsed-width': '60px'
              }
            }
          }
        }
      }

接着添加less配置，在test: sassModuleRegex下面就行

	//添加less-loader处理
            {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  modules: true,  
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                },
                'less-loader',
                [
                  {
                    loader: 'sass-resources-loader',
                    options: {
                      resources: [
                        path.resolve(__dirname, '../src/assets/styles/var.less')
                      ]
                    }
                  }
                ]
              ),
              // Don't consider CSS imports dead code even if the
              // containing package claims to have no side effects.
              // Remove this when webpack adds a warning or an error for this.
              // See https://github.com/webpack/webpack/issues/6571
              sideEffects: true,
            },
            // Adds support for CSS Modules, but using less
            // using the extension .module.scss or .module.less
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: {
                    getLocalIdent: getCSSModuleLocalIdent,
                  }
                },
                'less-loader',
                [
                  {
                    loader: 'sass-resources-loader',
                    options: {
                      resources: [
                        path.resolve(__dirname, '../src/assets/styles/var.less')
                      ]
                    }
                  }
                ]
              ),
            },

加完之后再次兴高采烈的run，然后又tm报错…，报这个错是因为你的less-loader版本过高，降低版本即可


重新安装一下，最后在run一下就好了