Vite 项目添加 Sass/Scss 并配置全局样式

（1）在 Vite 项目里，只需要安装 sass：

npm i -D sass

（2）Sass 的全局变量，需要在vite.config.ts配置一项：

css: {
  preprocessorOptions: {
    scss: {
      additionalData: "@import '@/assets/styles/variables.scss';"
    }
  }
}

@代表src根目录，关于Vite 目录别名配置官方文档。

（3）测试以及注意事项：

variables.scss

$border-color: #E9E9E9;

App.vue

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

注意：一定要在你的 style 标签里加上lang="scss"，否则全局变量以及 Scss 样式都无法生效。