vite开启scss module

Vite是一个现代的前端构建工具，它默认支持CSS预处理器如Sass和Less。如果你想要在Vite项目中启用SCSS模块化（即scss modules），你需要做以下几个步骤：

1. 安装依赖：首先确保已经全局安装了Node.js，然后通过npm或yarn在项目目录下安装`vite-plugin-sass`插件，以便处理SCSS文件：

   npm install -D vite-plugin-scss
   # 或者
   yarn add -D vite-plugin-sass

2. 配置Vite：在项目的`vite.config.js`文件中配置这个插件。添加`@vitejs/plugin-sass`到plugins数组中，并指定是否开启模块模式。例如：

   import { createVuePlugin } from '@vitejs/plugin-vue'
   import sass from 'vite-plugin-sass'

   export default defineConfig({
     plugins: [
       createVuePlugin(),
       sass({
         indentedSyntax: true, // 如果使用SCSS语法，设为true；如果使用SASS语法，可以去掉这行
         includePaths: ['src/sass'], // 指定SASS查找路径
         module: {
           // 开启模块模式
           cssModule: true,
         },
       }),
     ],
     // ...其他配置项...
   })

3. 使用SCSS模块：在`.vue`或`.svelte`等组件文件中，你可以像平时编写模块化的SCSS一样导入并复用样式。模块变量名需要以`__$`前缀，以避免污染全局作用域。

4. 编译和运行：保存配置后，运行`vite build`（生产环境）或`vite dev`（开发环境）命令，Vite会自动编译并应用SCSS模块。