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

在我們的React學(xué)過(guò)程中，當(dāng)我們?cè)谛枰煌膬?nèi)容時(shí)都需要自己進(jìn)行配置和調(diào)試，那么今天我們就來(lái)說(shuō)下“React怎么配置less和less的全局變量設(shè)置？”這個(gè)問(wèn)題，以下是小編收集的相關(guān)內(nèi)容，大家可以作為參考學(xué)習(xí)。

1.在項(xiàng)目中下載安裝插件less，代碼如下：

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

2.暴露配置文件

我們使用這串代碼 ?yarn eject?。

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

我們?cè)陧?xiàng)目中找到匹配loade的正則表達(dá)式，按照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

我們?cè)谖覀円阎捻?xiàng)目中，找到之前設(shè)置好的sass沒(méi)然后我們通過(guò)配置less找到sass所在位置，在其下方將less配置,代碼截圖如下：

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

1.安裝插件

我們?cè)陧?xiàng)目中安裝style-resource插件，代碼如下：

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

完成之后我們?cè)谖覀冊(cè)诘谝徊街械呐渲胠ess中進(jìn)行配置代碼截圖如下：

而且在這里我們要注意，ues在這里設(shè)置全局變量之后就我們的“{}”會(huì)變成[],還有我們?cè)谠O(shè)置中的patterns的路徑一定要設(shè)置對(duì)，我們來(lái)看下下面這個(gè)代碼吧！，大家可以作為參考！

// 配置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

以上就是有關(guān)于“React怎么配置less和less的全局變量設(shè)置？”這個(gè)問(wèn)題的解答，希望對(duì)你們有所幫助。當(dāng)然你如果有更好的想法可以和大家一起分享。更多關(guān)于react學(xué)習(xí)知識(shí)和考點(diǎn)，我們都可以在React教程中精進(jìn)行學(xué)習(xí)。