vite中配置postcss-modules

在 Vite 中配置 PostCSS Modules 可以按照以下步骤进行：

1. 安装 `postcss-modules` 和 `postcss`：

   npm install postcss-modules postcss --save-dev

2. 在 `vite.config.js` 文件中添加 `css.preprocessorOptions` 配置项：

   import postcssModules from "postcss-modules";
   
   export default {
     css: {
       preprocessorOptions: {
         postcss: {
           plugins: [
             postcssModules({
               // 生成的样式类名格式
               generateScopedName: "[name]__[local]___[hash:base64:5]",
             }),
           ],
         },
       },
     },
   };

这里使用了 `postcss-modules` 插件，并且配置了生成的样式类名的格式。

3. 在 CSS 文件中使用 `composes` 关键字引用其他 CSS 文件中的类名，并且将需要导出的类名通过 `:export` 导出：

   /* foo.css */
   .foo {
     color: red;
   }
   
   /* bar.css */
   :export {
     baz: _baz;
   }
   
   .bar {
     composes: foo from "./foo.css";
     background-color: blue;
   }
   
   .baz {
     composes: foo;
     font-size: 20px;
   }

在 `bar.css` 中通过 `composes` 引用了 `foo.css` 中的 `.foo` 类名，并且将 `.baz` 类名导出为 `_baz`，以便在其他 CSS 文件中使用。

4. 在 JavaScript 文件中使用导出的类名：

   import styles from "./bar.css";
   
   const element = document.createElement("div");
   element.classList.add(styles.baz);
   document.body.appendChild(element);

在 JavaScript 文件中通过 `import` 引入 CSS 文件，并且使用导出的类名。

这样就可以在 Vite 中使用 PostCSS Modules 了。