scss 封装公共样式变量

在开发中，我们会将整个系统的主色调，以及一些常用的颜色配置成变量并导出，并且以变量的形式在页面代码中使用，如果系统的某些颜色发生变化或是需要切换主题时，维护的成本就会大大减少。

scss、less 等 css 预处理器都支持向 CSS 添加许多附加功能（变量、嵌套等等）。

设置公共样式

现在我们来对一个后台系统中的左侧菜单栏的样式进行变量设置，以 element-plus 中的 <el-menu> 菜单组件为例。

在未进行变量设置之前的写法是下图这样的，颜色值直接写在了组件的属性上：

1. 建立一个 variable.scss 文件,设置全局 SCSS 变量：

:root {
  --menuBg: #304156;
  --menuText: #bfcbd9;
  --menuActiveText: #409eff
}

$menuBg: var(--menuBg);
$menuText: var(--menuText);
$menuActiveText: var(--menuActiveText);

2. 再建立一个 variables.module.scss 文件，用于导出变量

   这段导出的代码，也可以放在 variable.scss 中

:export {
        menuBg: $menuBg;
        menuText: $menuText;
        menuActiveText: $menuActiveText
}

文件目录结构如下：

3. config 文件配置

打开 vue.config.ts 文件（或者 vite.cofig.ts）中配置 CSS 预处理器（preprocessorOptions），将 variables.scss 文件配置到 scss 属性中

css: {
      preprocessorOptions: {
        scss: {
          javascriptEnabled: true,
          additionalData: `
            @use "@/styles/variables.scss" as *;
          `,
        },
      },
    }

4. 引入及使用

在页面引入文件，就可以使用定义好的变量了。下面就使用这些变量来配置左侧菜单的颜色：

import V from "@/styles/variables.module.scss";

<el-menu
  :background-color="V.menuBg"
  :text-color="V.menuText"
  :active-text-color="V.menuActiveText"
>

在 style 中也可以使用：

根据需要，在公共文件中修改颜色值，呈现不同的效果：