vite中对css及css模块化的处理

在Vite中，CSS 模块化处理是通过构建工具自动处理的。以下是如何在 Vite 项目中包含和处理 CSS 的简要指南和示例代码：

1. 在 vite.config.js 配置文件中，你可以通过 css 选项来配置 CSS 预处理器（如 Sass 或 Less）和全局样式文件。

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "src/styles/variables.scss";`
      }
    }
  }
});

2. 在组件中导入 CSS 模块：

<template>
  <div class="example">Hello, Vite!</div>
</template>
 
<script>
import exampleStyle from './style.module.scss';
 
export default {
  setup() {
    return {
      exampleStyle
    };
  }
};
</script>
 
<style module src="./style.module.scss"></style>

3. 使用 CSS 模块导出的类名：

// style.module.scss
.example {
  color: red;
}

在上述示例中，Vite 将处理 ./style.module.scss 文件，并自动生成一个模块对象 exampleStyle，你可以在 Vue 组件的 <script> 标签中导入并使用这个对象。通过这种方式，CSS 类名和动态生成的哈希字符串可以保证不会在不同的模块之间冲突。