React使用less语法

原创已于 2022-03-07 16:55:13 修改 · 667 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#npm #webpack #react.js #less #前端

于 2022-03-07 16:54:44 首次发布

react 专栏收录该内容

37 篇文章

订阅专栏

本文档指导如何在项目中安装并配置less和less-loader，以便在Webpack中使用Less语法。首先，通过yarn或npm安装less和less-loader。接着，通过`yarn eject`或`npm run eject`暴露出webpack配置文件。在webpack.config.js中，添加less和less-module的匹配规则，并在样式加载器中配置less-loader。如果启动时遇到由于less-loader版本过高导致的错误，可以卸载现有版本并降级到5.0.0。遵循这些步骤，你可以成功设置Less环境并解决兼容性问题。

1. 安装

yarn add less less-loader or npm i less less-loader

2. 打开webpack配置文件

创建项目的时候我们是看不到webpack文件的需要暴露出来

yarn eject or npm run eject

3. 配置less语法环境

在config文件下找到webpack.config.js文件
打开webpack.config.js找到如下图：
在这里插入图片描述
在下面添加如下两句代码：

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

添加完上面两句代码后收索oneOf
找到配置sass的代码片段，如图：
在这里插入图片描述
在其下面添加如下代码：

		 {

          	  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'

              ),

            },

4. 启动时报错

如果启动报下面错，说明你的less-loader版本过高，不兼容 getOptions 函数方法，所以需要对 less-loader 进行降级处理
在这里插入图片描述
解决方法：
通过 npm uninstall less-loader 命令卸载原版本的 less-loader，然后通过 npm install less-loader@5.0.0 命令下载降级版本的 less-loader，这个问题就可以解决了