react配置less

最新推荐文章于 2024-04-18 16:50:41 发布

原创最新推荐文章于 2024-04-18 16:50:41 发布 · 120 阅读

0 ·

CC 4.0 BY-SA版权

react 专栏收录该内容

2 篇文章

订阅专栏

该博客介绍了如何处理在使用Yarn安装less-loader@8.0.0时遇到的错误，建议降级到7.x版本。同时，文章详细展示了如何配置webpack来支持less和less模块，包括引入less-loader，并提供相应的正则表达式匹配规则。此外，还提及了在配置文件中排除死代码的设置。

yarn add less
// 由于目前less-loader@8.0.0会报错，所以安装7.x
yarn add less-loader@7.x

// 把配置文件暴露出来
yarn eject

在这里插入图片描述
这个报错是需要git commit

找到webpack.config.js

const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
//                                                                                                 比着sass写less -- 开始
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
//                                                                                                 比着sass写less -- 结束

{
              test: sassRegex,
              exclude: sassModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                },
                "sass-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,
            },
            // Adds support for CSS Modules, but using SASS
            // using the extension .module.scss or .module.sass
            {
              test: sassModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                  modules: {
                    getLocalIdent: getCSSModuleLocalIdent,
                  },
                },
                "sass-loader"
              ),
            },
            //                                                                 比着sass写less -- 开始
            {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                },
                "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,
            },
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                  modules: {
                    getLocalIdent: getCSSModuleLocalIdent,
                  },
                },
                "less-loader"
              ),
            },
            //                                                                 比着sass写less -- 结束