vite配置css模块化

在 Vite 中开启 CSS 模块化可以通过在 `vite.config.js` 文件中添加相应的配置来实现。下面是一个基本的示例：

// vite.config.js
module.exports = {
  css: {
    modules: true
  }
}

上述配置中，我们设置了 `css.modules` 属性为 `true`，表示启用 CSS 模块化。启用后，在组件中使用 CSS 时，类名将自动转换成哈希字符串，以确保每个组件都有唯一的类名。

如果要为特定的文件启用 CSS 模块化，可以在 `import` 语句中添加 `?module` 后缀：

<template>
  <div class="wrapper">
    <h1 class="title">Hello, World!</h1>
  </div>
</template>

<script>
import styles from './styles.module.css'

export default {
  name: 'MyComponent',
  // 使用导入的样式对象
  styles
}
</script>

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

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

在上面的示例中，我们将 `styles.module.css` 文件中的样式对象导入到组件中，并在 `<style>` 标签中使用 `module` 属性来启用 CSS 模块化。注意，在样式文件名后面添加 `.module` 后缀是一种常见的命名约定，它可以帮助我们快速区分哪些文件启用了 CSS 模块化。