1. 需求分析

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

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

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

朋友们不妨先停下来思考一下，再往下看实现步骤。当然，我们这里聊的是，VueCLI3+脚手架创建的项目。

2. 实现步骤

（1）全局使用scss变量

新建公共scss变量文件，在其中定义所需要的全局变量，用$定义。

配置vue.config.js文件：

让我们逐步解释一下这个配置选项，

• additionalData 是一个特定于预处理器的配置选项，用于向预处理器传递额外的数据。
• 数据值这里使用sass的 @import 指令来引入全局变量文件。

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
// 全局配置使用scss变量
css: {
loaderOptions: {
// 单独配置scss或sass，配置scss语句结尾必须要有分号，配置sass语句结尾必须没有分号
scss: {
additionalData: `@import "@/assets/css/sassGlobalVars.scss";`
},
// sass: {
// additionalData: `@import "@/assets/css/sassGlobalVars.sass";`
// },
},
},
})