React怎么配置less和less的全局變量設置？配置方法步驟分享！

在我們的React學過程中，當我們在需要不同的內(nèi)容時都需要自己進行配置和調試，那么今天我們就來說下“React怎么配置less和less的全局變量設置？”這個問題，以下是小編收集的相關內(nèi)容，大家可以作為參考學習。

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配置,代碼截圖如下：

通過添加代碼我們就可以完成配置了，重啟之后就生效了。！

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的全局變量設置？”這個問題的解答，希望對你們有所幫助。當然你如果有更好的想法可以和大家一起分享。更多關于react學習知識和考點，我們都可以在React教程中精進行學習。