如何引入全局样式文件？

背景

在编写样式时，为了提高样式的复用性和可维护性，通常我们会把常用的常量、颜色、字体等信息封装到一个单独的公共样式变量文件中，然后全局引入到项目中。进而在任何组件中不需要再单独引用，直接使用变量即可。

通过定义全局变量可以减少我们项目中的重复代码，并且在需要修改某个常量或样式时，只需修改全局变量的值，而不需要逐个修改每个使用该值的地方。

那么就有了今天我们要讨论的问题，当我们使用less或sass预处理器定义样式变量时，该如何在全局中使用其变量呢？

如何在項目中引入针对全局的less或sass文件

第一步：创建全局样式文件

首先，你需要创建一个全局样式文件，用于包含项目中的全局样式规则。

第二步：定义全局样式

在全局样式文件中，你可以定义一些适用于整个项目的样式规则，比如重置样式、基本样式设置等。

第二步：配置项目中的引入配置文件

• vue-cli2

在项目根目录/build/utils.js

function lessResourceLoader() {
    // 定义加载器数组
    var loaders = [
      cssLoader, // 加载 CSS 文件的加载器
      'less-loader', // 加载 Less 文件的加载器
      {
        loader: 'sass-resources-loader', // 使用 sass-resources-loader 加载器
        options: {
          resources: [ // 资源文件路径数组
            // 导入公共 Less 文件路径
            path.resolve(__dirname, '../src/assets/css/common.less'),//注意这里的路径要改成你自己的全局样式文件的相对路径
          ]
        }
      }
    ];
    // 如果设置了提取选项
    if (options.extract) {
      // 返回使用 ExtractTextPlugin 插件提取样式文件的配置
      return ExtractTextPlugin.extract({
        use: loaders, // 使用加载器数组
        fallback: 'vue-style-loader' // 使用 vue-style-loader 作为回退加载器
      })
    } else {
      // 返回加载器数组，以 vue-style-loader 作为首个加载器
      return ['vue-style-loader'].concat(loaders)
    }
}

// 返回不同类型样式文件的加载器配置对象
return {
  // CSS 文件加载器配置
  css: generateLoaders(),
  // PostCSS 加载器配置
  postcss: generateLoaders(),
  // Less 文件加载器配置
  less: lessResourceLoader(), // 调用 lessResourceLoader 函数获取 Less 文件加载器配置
  // Sass 文件加载器配置
  sass: generateLoaders('sass', { indentedSyntax: true }), // 使用缩进语法
  // SCSS 文件加载器配置
  scss: generateLoaders('sass'),
  // Stylus 文件加载器配置
  stylus: generateLoaders('stylus'),
  // Styl 文件加载器配置
  styl: generateLoaders('stylus')
}

• vue-cli3

1. 安装Webpack插件style-resources-loader：

安装时，我们要选择less预处理器对应的版本。

vue add style-resources-loader

2. 配置vue.config.js文件：

这里我们使用的是 Node.js 中的路径解析表达式，目的是获取特定全局样式文件的绝对路径。但是要注意的是，这里不可使用别名路径，否则会导致错误。

const { defineConfig } = require('@vue/cli-service') // 引入 defineConfig 方法
const path = require('node:path') // 引入 Node.js 中的 path 模块

module.exports = defineConfig({
  // 全局配置使用less变量
  pluginOptions: {
    'style-resources-loader': { // 使用 style-resources-loader 插件配置全局样式资源
      preProcessor: 'less', // 预处理器为 Less
      patterns: [ // 匹配的资源文件路径数组
        path.resolve(__dirname, "./src/assets/css/lessGlobalVars.less") // Less 全局变量文件路径
      ]
    }
  }
})

• vite

vite.config.js文件中

return{
    css: {
            preprocessorOptions: {
                less: {
                    additionalData: `@import "${path.resolve(__dirname, `src/assets/styles/globalVar.less`)}";` // 引入全局变量文件路径

                }
            }
       },
}