Vite 通过文件名 .module.css 等强制启用 CSS Modules，需严格遵循命名规范、正确导入使用、避免引入全局样式，并可配置哈希增强类名唯一性以防止冲突。
Vite 默认对 .module.css（或 .module.scss、.module.less 等）后缀的文件自动启用 CSS Modules，无需额外开启。但要真正防止全局类名冲突，关键不是“是否开启”，而是确保模块化生效且不被绕过。
文件命名必须带 .module. 前缀
这是 Vite 识别模块化的硬性约定，不是可选项：
- ✅ 正确：
Button.module.css、Card.module.scss - ❌ 错误：
Button.css、button.Module.css（大小写敏感）、styles.module（缺后缀）
一旦文件名不符合，Vite 就当普通 CSS 处理，类名原样输出，全局冲突立刻出现。
导入和使用方式必须匹配模块化逻辑
CSS Modules 导出的是一个 JS 对象，不是字符串：
- ✅ 正确：
import styles from './Button.module.css'; return <button className={styles.btn}>点击</button>; - ❌ 错误：
// 直接写字符串，完全跳过模块化映射 return <button className="btn">点击</button>; // 或拼接非 styles 对象的字符串 className={`${styles.btn} ${'extra-class'}`后者会让
extra-class以全局形式注入，可能覆盖或被其他全局样式干扰。立即学习“前端免费学习笔记（深入）”；
避免在模块文件里引入全局样式
模块文件内禁止 @import './reset.css' 这类操作：
- 被 import 的
.css文件不会被模块化，其样式会以全局方式注入 - 正确做法是把全局样式（如 reset、theme）单独放在
src/styles/下，只在main.jsx中导入一次 - 如需复用样式，用
composes引入另一个.module.*文件，而非普通 CSS
可选但推荐：自定义哈希生成规则增强唯一性
默认哈希较短，极端情况下有碰撞风险。可在 vite.config.js 中强化：
export default defineConfig({
css: {
modules: {
generateScopedName: '[name]__[local]___[hash:base64:8]',
hashPrefix: 'myapp-',
regexp: /.module\.(css|scss|less)$/i,
}
}
})这样 Button.module.css 中的 .btn 会变成 Button__btn___a1b2c3d4，而 Modal.module.scss 中同名 .btn 变成 Modal__btn___e5f6g7h8，彻底隔离。
不复杂但容易忽略
