React如何配置less和less的全局變量

這篇“React如何配置less和less的全局變量”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“React如何配置less和less的全局變量”文章吧。

一、配置Less

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

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

二、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的全局變量”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。