react项目在vite下配置postcss-modules

要在 Vite 中使用 PostCSS Modules，你需要按照以下步骤进行配置：

1. 首先，安装依赖：

   npm install --save-dev postcss postcss-modules

2. 在项目根目录下创建 `postcss.config.js` 文件，并添加以下内容：

   module.exports = {
     plugins: {
       'postcss-modules': {
         generateScopedName: '[name]__[local]___[hash:base64:5]',
       },
     },
   };

3. 在 `vite.config.js` 文件中添加 PostCSS 插件：

   import vue from '@vitejs/plugin-vue';
   import postcss from 'rollup-plugin-postcss';

   export default {
     plugins: [
       vue(),
       postcss({
         plugins: [],
         extract: false,
         modules: true,
         minimize: true,
         use: ['sass'],
       }),
     ],
   };

4. 在组件中使用 PostCSS Modules：

   <template>
     <div :class="$style.container">Hello, World!</div>
   </template>

   <style module>
   .container {
     background-color: #f00;
   }
   </style>

这样，你就可以在 React 项目的 Vite 中使用 PostCSS Modules 了。