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

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