CSS 模块化导入

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

导入 CSS

JavaScript

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

CSS Modules

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

CSS

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

JavaScript

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

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

Vue 中使用

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 会将类名转换为哈希值：

原类名	转换后
.button	._button_abc123
.primary	._primary_def456

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

全局 CSS vs CSS Modules

对比项	普通 CSS	CSS Modules
文件后缀	.css	.module.css
作用域	全局	局部（组件内）
类名冲突	可能冲突	哈希避免冲突
导入方式	import './xxx.css'	import styles from './xxx.module.css'

要点总结

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

📝 发现内容有误？点击此处直接编辑