CSS 模块化导入

Vite 支持在 JavaScript 中直接导入 CSS 文件，并提供 CSS Modules 实现局部作用域。

导入 CSS

// 导入 CSS，样式作用于全局
import './styles/main.css'
import './styles/reset.css'

CSS Modules

使用 .module.css 后缀启用 CSS Modules：

/* Button.module.css */
.button {
  padding: 10px 20px;
  background: blue;
}
.primary {
  background: green;
}

// 导入 CSS Module
import styles from './Button.module.css'

// 使用类名
document.createElement('button').className = styles.button

Vue 中使用

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

<template>
  <button :class="styles.button">普通按钮</button>
  <button :class="[styles.button, styles.primary]">主要按钮</button>
</template>

类名映射

CSS Modules 会将类名转换为哈希值：

注意：CSS Modules 默认生成哈希类名，确保样式局部作用域。

全局 CSS vs CSS Modules

要点总结

• 普通 CSS 导入后作用于全局
• CSS Modules 使用 .module.css 后缀
• CSS Modules 类名转换为哈希值
• 样式局部作用域避免冲突