在Vue 3 + TypeScript + Vite 项目中安装和使用 SCSS

1、安装 SCSS 的相关依赖

npm install sass --save-dev

2、配置 Vite

对于 Vue 3，Vite 已经内置了对 SCSS 的支持，通常不需要额外的配置。但是，如果需要自定义配置，可以在路径/src/styles/variables.scss新建文件，然后在 vite.config.ts 文件中添加或修改配置

// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';export default defineConfig({plugins: [vue()],css: {preprocessorOptions: {scss: {additionalData: `@import "@/styles/variables.scss";` // 例如，导入全局变量文件}}}
});

3、使用scss

<style lang="scss">
.example {color: red; // 使用 SCSS 语法编写样式
}
</style>