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的全局变量”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。