react中如何使用less配置全局变量

在配置全局变量之前，请先确保项目中已安装less并已正确配置，如未安装请移步这篇文章， 如何在react项目中使用less，或复制地址查看https://juejin.cn/post/6920785530963623943

首先我们在src下建立common.less文件，作为我们全局变量的文件，并设置主题色变量

@themeColor: green;

定义好全局主题色以后，就可以在需要用主题色的less文件中引入common.less文件

//使用less结束的分号;一定不能少
@import "./common.less";

.btn {
  background: @themeColor;
  color: #fff;
}

如果不引入common就会报一个错

那么问题来了，一个项目肯定有很多个样式文件，那么每个文件都需要引入common.less文件，这也太麻烦了，还有一种方法就是修改webpack.config.js配置，没错，还是上个文章修改的文件，还是修改同样的地方，熟悉的配方，熟悉的味道.
当然我们还需要安装一个插件style-resource,在终端中输入npm install style-resources-loader --save 或 yarn add style-resources-loader --save

安装好以后打开webpack.config.js找到我们刚才修改的地方

我们需要修改use内容

同样还是修改两个地方，修改的代码如下：

{
  test: lessRegex,
  exclude: lessModuleRegex,
  use: [
    ...getStyleLoaders(
      {
        importLoaders: 3,
        sourceMap: isEnvProduction
          ? shouldUseSourceMap
          : isEnvDevelopment,
        modules: {
          mode: 'icss',
        },
      },
      'less-loader'
    ),
    {
      loader: 'style-resources-loader',
      options: {
        patterns: path.resolve(__dirname, '../src/common.less'),
      },
    },
  ],
  // Don't consider CSS imports dead code even if the
  // containing package claims to have no side effects.
  // Remove this when webpack adds a warning or an error for this.
  // See https://github.com/webpack/webpack/issues/6571
  sideEffects: true,
},
// Adds support for CSS Modules, but using SASS
// using the extension .module.scss or .module.sass
{
  test: lessModuleRegex,
  use: [
    ...getStyleLoaders(
      {
        importLoaders: 3,
        sourceMap: isEnvProduction
          ? shouldUseSourceMap
          : isEnvDevelopment,
        modules: {
          mode: 'icss',
        },
      },
      'less-loader'
    ),
    {
      loader: 'style-resources-loader',
      options: {
        patterns: path.resolve(__dirname, '../src/common.less'),
      },
    },
  ],
},

修改好配置以后重启项目，一定要重启项目，然后就可以在项目的任意less文件中，直接用在common.less中定义好的变量了。