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