React中配置less

最新推荐文章于 2024-08-28 04:05:46 发布

撅腚的duck

最新推荐文章于 2024-08-28 04:05:46 发布

阅读量148

点赞数

分类专栏：配置文章标签： react.js

本文链接：https://blog.youkuaiyun.com/weixin_57157114/article/details/120100232

版权

配置专栏收录该内容

4 篇文章

订阅专栏

这篇博客介绍了如何在React项目中设置Less的步骤，包括安装less和less-loader，然后在webpack.config.js中配置相关规则。当遇到配置报错TypeError时，提示可能是因为less-loader版本过高，建议降级到7.x版本来解决问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React中配置less

安装less

npm install less-loader less --save-dev

查找 node_modules 下面的react-scripts/config/webpack.config.js
上面两行代码放在
在这里插入图片描述
接着ctrl+f查找这个sassModuleRegex 放在这段注释的上面

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


  {
              test: lessRegex,
              exclude: sassModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                },
                'less-loader'
              ),
              sideEffects: true,
            },
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: true,
                  getLocalIdent: getCSSModuleLocalIdent,
                },
                'less-loader'
              ),
            },

配置less报错修改TypeError: this.getOptions is not a function
是因为less-loder版本过高，安装下旧版本

// 卸载