在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>