vite怎么配置css模块化

在 Vite 中使用 CSS 模块化，你需要做以下几个步骤：

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

npm install postcss-modules postcss --save-dev

2. 在项目根目录下创建 `postcss.config.js` 文件，并添加如下代码：

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

3. 在 `vite.config.js` 中配置 `css`：

import { defineConfig } from 'vite';

export default defineConfig({
  css: {
    modules: {
      localsConvention: 'camelCaseOnly'
    },
    postcss: {
      plugins: [require('postcss-modules')()]
    }
  }
});

现在你可以在组件中使用 CSS 模块化了：

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

<style module>
.container {
  padding: 20px;
  background-color: #eee;
}

.title {
  font-size: 24px;
  color: #333;
}
</style>

在上面的代码中，`$style` 对象是由 `postcss-modules` 生成的，它包含了一个类名到哈希值的映射关系。这使得你可以在组件中使用类似 `:class="$style.container"` 的方式来使用 CSS 类。