Vite 配置全局 Scss 变量安装`sass`，创建`variables.scss`定义变量，在`vite.conf

一、安装依赖

pnpm i sass -D

二、相关配置

2.1、定义变量文件

在 src/styles 目录下创建 variables.scss 文件，定义全局变量

$color-white: #ffffff;
$color-black: #000000;
$color-primary: #006fff;
$color-success: #03c988;
$color-warning: #ff983f;
$color-danger: #ff3d3d;

2.2、配置 Vite

修改 vite.config.ts 文件，配置 CSS 预处理器选项

import { defineConfig } from 'vite'

export default defineConfig({
  css: {
    /**
     * 如果启用了这个选项，那么 CSS 预处理器会尽可能在 worker 线程中运行；即通过多线程运行 CSS 预处理器，从而极大提高其处理速度
     * https://cn.vitejs.dev/config/shared-options#css-preprocessormaxworkers
     */
    preprocessorMaxWorkers: true,
    /**
     * 建议只用来嵌入 SCSS 的变量声明文件，嵌入后全局可用
     * 该选项可以用来为每一段样式内容添加额外的代码。但是要注意，如果你添加的是实际的样式而不仅仅是变量，那这些样式在最终的产物中会重复
     * https://cn.vitejs.dev/config/shared-options.html#css-preprocessoroptions-extension-additionaldata
     */
    preprocessorOptions: {
      scss: {
        // 如果您的终端提示 legacy JS API Deprecation Warning, 您可以配置以下代码在 vite.config.ts 中
        // 使用现代 CSS API，避免 legacy warning
        api: 'modern-compiler',
        // 全局引入变量文件，使用路径别名 @ 表示 src 目录
        additionalData: `@use "@/styles/variables.scss" as *;`,
      },
    },
  },
})

嵌入变量时使用了路径别名 @ 符点我了解更多

三、使用全局变量

在任意 Vue 组件中即可使用全局 Scss 变量

<template>
  <div class="app-content">首页</div>
</template>

<script setup lang="ts">
defineOptions({ name: 'Dashboard' })
</script>

<style lang="scss" scoped>
.app-content {
  background-color: $color-black;
}
</style>

四、注意事项

additionalData 选项只用于嵌入变量声明文件，不要添加其他样式
使用路径别名 @ 时需要在 vite.config.ts 中正确配置路径别名
确保所有 SCSS 文件都使用 .scss 文件扩展名

通过以上配置，你可以在项目中方便地使用全局 SCSS 变量，提高代码维护性和一致性。