vue3 + vite 使用sass

Vue3 与 Vite 配合使用 Sass 的步骤相对简单，Vite 提供了对 CSS预处理器如 Sass、Less 等的良好支持。以下是基本的设置过程：

1. **安装依赖**:
- 首先，在项目根目录下安装 `vite` 和 `@vitejs/plugin-sass` 插件，运行命令：

     npm install -D vite @vitejs/plugin-sass sass

2. **配置 Vite**:
在 `vite.config.js` 文件中添加 `@vitejs/plugin-sass` 插件到 `plugins` 数组里：

   import { defineConfig } from 'vite';
   import { createSassPlugin } from '@vitejs/plugin-sass';

   export default defineConfig({
     plugins: [
       createSassPlugin({
         indentedSyntax: true, // 如果使用 SCSS 格式，则设为 true，默认是 false (Compass syntax)
       }),
     ],
   });

这里的 `indentedSyntax` 根据你的 Sass 语法选择 `true` 或 `false`。

3. **编写 Sass**:
在 `.vue` 组件中使用 `.scss` 或者 `.sass` 后缀名编写样式，例如：

   <template>
     <div class="my-component">
       <!-- ... -->
     </div>
   </template>

   <script lang="ts" setup></script>
   <style lang="scss">
   .my-component {
     color: red;
   }
   </style>

4. **构建与热更新**:
执行 `npm run dev` 或 `yarn dev` 开始开发服务器，Vite 将自动编译并应用 Sass 变换。