React如何配置less和less的全局变量

这篇"React如何配置less和less的全局变量"文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇"React如何配置less和less的全局变量"文章吧。

一、配置Less

1.在项目中下载安装插件less，代码如下：

npm install --save less less-loader或yarn add --save less less-loader

2.暴露配置文件

我们使用这串代码 yarn eject。

3.配置webpack.config.js文件.

我们在项目中找到匹配loade的正则表达式，按照css的样子添加less，代码如下：

const cssRegex = /\.css$/const cssModuleRegex =/\.module\.css$/const sassRegex = /\.(scss | sass)$/const sassModuleRegex = /\.module\.(scss |sass)$/const lessRegex = /\.less$/const lessModuleRegex = /\.module\.less$/

4.配置less

我们在我们已知的项目中，找到之前设置好的sass没然后我们通过配置less找到sass所在位置，在其下方将less配置

通过添加代码我们就可以完成配置了，重启之后就生效了。

二、less全局变量

1.安装插件

我们在项目中安装style-resource插件，代码如下：

npm install --save-dev style-resources-loader和yarn add --save-dev style-resources-loader

完成之后我们在我们在第一步中的配置less中进行配置

而且在这里我们要注意，ues在这里设置全局变量之后就我们的"{}"会变成[],还有我们在设置中的patterns的路径一定要设置对，我们来看下下面这个代码吧！，大家可以作为参考！

// 配置less ---------- Start {    test: lessRegex,    exclude: cssModuleRegex,    use: [      ...getStyleLoaders(        {          importLoaders: 3,          sourceMap: isEnvProduction            ? shouldUseSourceMap            : isEnvDevelopment,        },        'less-loader'      ),      {        loader: 'style-resources-loader',        options: {          patterns: path.resolve(__dirname, '../src/common.less'),        },      },    ],    sideEffects: true,  },  {    test: lessModuleRegex,    use: [      ...getStyleLoaders(        {          importLoaders: 3,          sourceMap: isEnvProduction            ? shouldUseSourceMap            : isEnvDevelopment,          modules: {            getLocalIdent: getCSSModuleLocalIdent,          },        },        'less-loader'      ),      {        loader: 'style-resources-loader',        options: {          patterns: path.resolve(__dirname, '../src/common.less'),        },      },    ],  },  // 配置less ---------- End

以上就是关于"React如何配置less和less的全局变量"这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注行业资讯频道。