vite实现css module

Vite 是一个非常快速的前端构建工具，它内置了对 CSS 的支持，包括 CSS 模块化。下面是在 Vite 中实现 CSS 模块化的步骤：

1. 安装依赖

首先，您需要安装 `sass` 和 `sass-loader` 依赖项，它们将帮助您在 Vite 中使用 CSS 模块化。

npm install sass sass-loader --save-dev

2. 配置 `vite.config.js`

在 `vite.config.js` 中，您需要配置 `css` 属性来启用 CSS 模块化和 `sass` 预处理器。例如：

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

export default defineConfig({
  plugins: [vue()],
  css: {
    modules: {
      localsConvention: 'camelCaseOnly'
    },
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/variables.scss";`
      }
    }
  }
})

在上面的示例中，`css.modules` 属性启用了 CSS 模块化，并将类名转换为 CamelCase 格式。`preprocessorOptions.scss` 属性启用了 `sass` 预处理器，并将全局变量文件导入到所有样式文件中。

3. 创建样式文件

在您的样式文件中，您可以使用 `:local()` 选择器来定义局部样式。例如：

.container {
  padding: 10px;
  background-color: white;
  border-radius: 5px;

  :local(.title) {
    font-size: 18px;
    color: #333;
  }

  :local(.description) {
    font-size: 14px;
    color: #666;
  }
}

在上面的示例中，`:local()` 选择器定义了 `.title` 和 `.description` 类的局部样式。

4. 在组件中使用样式

在您的组件中，您可以像这样导入样式文件：

<template>
  <div class="container">
    <h2 class="title">Title</h2>
    <p class="description">Description</p>
  </div>
</template>

<style module>
  @import "@/styles/your-styles.scss";
</style>

在上面的示例中，`<style module>` 标签启用了 CSS 模块化，并导入了样式文件。然后，您可以像这样在组件中使用局部类名：`.title` 和 `.description`。

这就是在 Vite 中实现 CSS 模块化的基本步骤。希望对您有所帮助！