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