react中webpack.config.js配置lessless-loader less_config.js lessloader-优快云博客

本文链接：https://blog.youkuaiyun.com/ximenxiafeng/article/details/107297511

本文详细介绍如何在项目中安装并配置Less预处理器与Webpack加载器，包括解决eject过程中的常见问题，修改配置文件以支持Less模块。

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

1、安装less-loader和less

npm install less-loader less -sava--dev

2、暴露webpack配置文件

yarn run eject

如果遇到如下问题，
!](https://img-blog.csdnimg.cn/2020071212000457.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpbWVueGlhZmVuZw==,size_16,color_FFFFFF,t_70)
可具提示需commit ，这是git地址有问题，输入如下命令行

git add .
git commit -am "Save before ejecting"

然后再输入：yarn run eject 就可以了

注意：如果还是不行，将项目传到github，建立本地连接，再输入：yarn run eject 应该就可以了

3、修改webpack.config.js配置文件

找到

const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;

修改为

const cssRegex = /\.(css|less)$/;
const cssModuleRegex = /\.module\.(css|less)$/;

找到

           {
              test: cssRegex,
              exclude: cssModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction && shouldUseSourceMap,
              }),
              // 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,
            },

修改为

          {
              test: cssRegex,
              exclude: cssModuleRegex,
              use: getStyleLoaders({
                importLoaders: 2,
                sourceMap: isEnvProduction && shouldUseSourceMap,
              },
                'less-loader'
              ),
              // 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,
            },