React配置less以及less的全局变量设置

工作中接触react的项目比较的少，对于less的全局变量设置在vue项目中设置过，react的全局变量设置没怎么接触了。 看到有小伙伴问这个，试着在网上找了下，也是花费了不少的功夫才找到不错的方式，在这里分享给大家。 由于之前vue项目里没法使用sass-resource-loader，一开始也没有往这一方面想，话不多说正文开始。

首先React配置Less

看到这篇文章基本上是上手react项目了吧，这里就不从创建项目开始了。

1. 在项目中下载安装less插件

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

2. 暴露配置文件

yarn eject

3. 配置webpack.config.js文件

找到匹配loader的正则表达式，按照css的样子添加less

4. 配置less

在react项目中，已经默认为我们设置了sass，我们配置less找到sass所在位置，在其下方将less配置： 先找默认的sass配置所在 配置less 这样less已经配置好，重启项目即可使用

less的全局变量设置

下来我们继续对less的全局变量进行设置

1. 项目安装style-resources-loader插件

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

安装之后，在上边配置less的位置加上less的配置 这里一定要注意，use这里在设置全局变量的适合由{}变成了[], 还有就是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

配置完这些less就ok啦，如有疑问和其他建议欢迎留言

本文借鉴： https://www.cnblogs.com/wrhbk/p/11413634.html