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

5,002 阅读1分钟

在配置全局变量之前,请先确保项目中已安装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就会报一个错

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

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

image.png 我们需要修改use内容

image.png 同样还是修改两个地方,修改的代码如下:

{
  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中定义好的变量了。