在react项目中使用less

最新推荐文章于 2024-09-11 22:59:14 发布

雨洛晴天依旧

最新推荐文章于 2024-09-11 22:59:14 发布

阅读量860

点赞数

文章标签： less

本文链接：https://blog.csdn.net/qq_34273888/article/details/103022617

版权

在react项目中使用less

安装依赖包：cnpm i --save-dev less less-loader （less 、less-loader两个包）
npm run eject 来暴露webpack的配置文件，你会发现多了config为名的文件夹。如果这步报错没关系，其实我们只需要在之前运行 git add . 命令，然后再运行 git commit -m “init” 命令就可以解决。
修改webpack配置

代码：

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

在这里插入图片描述
代码：

  {
              test: lessRegex,
              exclude: lessModuleRegex,
              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,
            },
            // Adds support for CSS Modules, but using SASS
            // using the extension .module.scss or .module.sass
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: true,
                  getLocalIdent: getCSSModuleLocalIdent,
                },
                'less-loader'
              ),
            },