React——less的配置和使用

最新推荐文章于 2024-09-14 19:01:03 发布

原创最新推荐文章于 2024-09-14 19:01:03 发布 · 510 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #react.js

本文介绍了如何在webpack中配置less和less-loader，包括安装步骤和可能出现的错误解决办法。通过调整webpack配置，使得全局样式和模块化样式可以正确应用。同时，讲解了在less中使用变量和引用样式的方法。

less 和less-loader的安装
```
npm install less less-loader --save
```

less在webpack.config,js中的配置

//找到const cssModuleRegex = /\.module\.css$/;，在下方添加以下两句


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


/* 找到以下代码，在下方添加
        {
              test: cssModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction
                  ? shouldUseSourceMap
                  : isEnvDevelopment,
                modules: {
                  getLocalIdent: getCSSModuleLocalIdent,
                },
              }),
        },
 */

//所需添加的代码
        {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                modules: true,
                sourceMap: isEnvProduction && shouldUseSourceMap
              },
                "less-loader"
              ),
              sideEffects: true
        },
        {
              test: lessModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction && shouldUseSourceMap,
                modules: true,
                getLocalIdent: getCSSModuleLocalIdent
              },
                "less-loader"
              )
        },

如果出现错误：this.getOptions is not a function，则是因为less-loader的版本过高，需要卸载当前的less-loader的版本，下载低版本的less-loader
```
//卸载指令
npm uninstall less-loader
//安装5.0.0版本指令
npm install less-loader@5.0.0
```
使用：
1. 全局采用：通过标签上的className去匹配，需要在less的最外层添加:global
```
:global{
  .App {
    text-align: center;
  }
}
```
2. 通过变量名采用：在less中写入style的属性名，在标签中使用变量来引用
```
<div className={style.App} ></div>
<!-- style为引入的less的文件， App为所需要的引用的文件中的style名 --!>
```