配置 Vite scss 全局样式

1️⃣安装 sass 依赖

file:[cmd]
npm i -D sass

2️⃣配置 vite-config 文件

file:[vite-config.ts]
css: {
  preprocessorOptions: {
    scss: {
      additionalData: "@import '@/assets/styles/variables.scss';"
    }
  }
}

@ 代表 src 根目录，Vite 目录别名配置官方文档。关于 scss 中 @import 和 @use 的区别查看视频：scss/sass @use 和 @import 的区别。

3️⃣创建全局变量文件

file:[variables.scss]
$border-color: #E9E9E9;

4️⃣全局变量使用，无需导入

file:[App.vue]
<style scoped lang="scss">
.app {
  border: 1px solid $border-color;
}
</style>