Vite 中 CSS Modules 开箱即用，需遵守三规则：文件名必须含 .module. 前缀（如 Button.module.css）；导入必须通过模块对象（import styles from './Button.module.css'）；避免在模块内引入全局样式或混用全局类名。
文件名必须带 .module. 前缀
Vite 仅识别 .module.css、.module.scss、.module.less 这类后缀的文件为 CSS Modules。这是硬性约定，大小写敏感，缺一不可：
- ✅ 正确：Button.module.css、Header.module.scss、utils.module.less
- ❌ 错误：Button.css（当普通 CSS 处理）、button.Module.css（大小写错）、styles.module（没后缀）、Component.module.CSS（大写后缀）
导入和使用必须走模块对象
CSS Modules 导出的是一个 JS 对象，键是类名，值是生成后的唯一哈希类名：
- ✅ 正确：
import styles from './Button.module.css';+<button className={styles.btn}> - ❌ 错误：
<button className="btn">（绕过模块化，直接写死类名） - ❌ 避免混用：
className={`${styles.btn} extra-class`}中的extra-class是全局类，可能污染或被覆盖
别在模块文件里引入全局样式
如果在 Button.module.css 里写 @import '../reset.css'，那 reset.css 会以全局方式注入，破坏隔离：
- ✅ 全局样式（如 reset、variables、theme）统一放在
src/styles/下，只在main.jsx/ts中导入一次 - ✅ 想复用其他组件样式？用
composes引入另一个.module.*文件，例如：@value btn from './BaseButton.module.css';
可选：自定义哈希提升唯一性
默认哈希较短，大型项目中极小概率碰撞。可在 vite.config.js 中增强：
立即学习“Java免费学习笔记（深入）”；
vite.config.js
export default defineConfig({
css: {
modules: {
generateScopedName: '[name]__[local]___[hash:base64:8]',
hashPrefix: 'myapp-'
}
}
})
这样 Button.module.css 中的 .btn 会变成 Button__btn___a1b2c3d4，而 Modal.module.scss 的同名 .btn 是 Modal__btn___e5f6g7h8，彻底隔离。
