react项目中引入less不生效的配置

react项目中默认不支持less, 所以必须手动配置, 但是在react项目中webpack相关配置是被隐藏了的, 所以需要下面的命令让他暴露出来

暴露配置

yarn run eject

注意:执行这个命令之前必须提交本地代码, 即执行完git add .,git commit -m 提交信息

安装所需依赖包

yarn add less less-loader

修改配置文件

找到 config 文件里面的 webpack.config.js 文件, 加上以下内容

1. 全局声明以下变量 const lessRegex = /\.less$/; const lessModuleRegex = /\.module\.less$/

2. 找到 默认暴露的函数 return的内容里面的 module, 在 modeule.oneOf 数组中加上以下内容

{
  test: lessRegex,
  exclude: lessModuleRegex,
  use: getStyleLoaders(
         {
            importLoaders: 2,
            sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
            modules: {
               mode: "local",
            },
         },
        'less-loader'
  ),
    sideEffects: true,
},
{
    test: lessModuleRegex,
    use: getStyleLoaders(
        {
            importLoaders: 2,
            sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
            modules:{
                mode: "local",
                getLocalIdent: getCSSModuleLocalIdent,
            }
        },
    'less-loader'
    )
},