vite模块化引入scss

Vite是一个现代的前端构建工具，它支持快速热更新和零配置。在Vite中引入SCSS（Sassy CSS）模块化通常涉及到安装依赖、设置配置以及编写SCSS文件。

**步骤1：安装依赖**
首先，你需要在项目中安装`vite-plugin-vue2`和`sass`（或者`@vue/cli-plugin-sass`如果使用Vue CLI）。可以在命令行中运行：

npm install --save-dev vite-plugin-vue2 sass 或者 yarn add -D vite-plugin-vue2 sass

**步骤2：配置Vite**
在`vite.config.js`文件中，添加对`vite-plugin-vue2`的支持，并启用CSS预处理器插件：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import sveltePreprocess from 'vite-plugin-svelte-preprocess'

export default defineConfig({
  plugins: [
    vue(),
    {
      name: 'svelte',
      preprocess: sveltePreprocess()
    // 如果你选择的是SASS，则添加：
    //   {
    //     name: 'svelte-scss',
    //     compilerOptions: {
    //       preprocessorOptions: {
    //         scss: true,
    //       },
    //     },
    //   }
    ]
})

**步骤3：编写SCSS**
在`.vue`文件的`<style>`标签内或单独的`.scss`文件中编写你的样式。Vite会自动识别并转换SCSS文件为CSS。例如：
`src/components/Button.vue`

<template>
  <button class="custom-button">
    Click me
  </button>
</template>

<style lang="scss">
.custom-button {
  color: red;
}
</style>

**