css modules 的本质是构建时将类名重命名为唯一哈希值（如_button_abc12），而非简单加前缀；哈希由模块路径与原始类名共同决定，确保跨文件同名类不冲突；必须通过 import styles from './x.module.css' 获取映射对象并动态使用 styles.button，不可硬写 class="button"。
CSS Modules 不是加前缀，是重命名
CSS Modules 的本质不是给 .btn 加个 .myapp-btn 前缀，而是把它彻底替换成类似 _btn_abc12 这样的唯一哈希名。这个替换发生在构建阶段，且每个文件独立计算——哪怕两个不同组件都写 .button，生成的最终类名也绝不会重复。
关键点在于：哈希值由「模块路径 + 原始类名」共同决定，所以 Button.module.css 里的 .button 和 Modal.module.css 里的 .button 天然不同。这不是约定，是确定性生成。
import styles from './X.module.css' 返回的是对象，不是字符串
你不能像传统 CSS 那样直接写 class="button"，必须通过 JS 动态注入：
import styles from './Button.module.css'
// styles 是 { button: '_button_abc12', disabled: '_disabled_def34' }
<button classname="{styles.button}">Click</button>
常见错误：
- 忘了改 HTML class 属性，还在写
class="button"→ 样式完全不生效 - 用
require('./X.module.css')而非import→ 返回值结构不同，styles.button可能是undefined - 文件没带
.module.css后缀 → loader 不触发，类名原样输出，冲突照旧
全局样式必须显式声明，否则无效
CSS Modules 默认只作用于当前模块内的类选择器。如果你需要重置 html、body，或复用第三方库的类（比如 highlight.js 的 .hljs），必须用 :global() 包裹：
.normal { color: red; }
:global(.hljs) { background: #2d2d2d; }
:global(html, body) { margin: 0; }
漏掉 :global() 就会导致这些规则被忽略，尤其容易在引入语法高亮、图表库时踩坑。
TypeScript 项目必须补声明文件，否则类型报错
TypeScript 默认不认识 .module.css，直接 import 会提示 “Cannot find module”。需在 src/typing.d.ts 或任意 .d.ts 文件中添加：
declare module '*.module.css' {
const classes: { [key: string]: string };
export default classes;
}
注意：*.module.scss 要单独再声明一次，不能共用；如果用了 camelCase 类名（如 myButton），建议把类型改成 Record<string string></string> 避免 TS 报 key 不存在。
document.body，class 名还在，但作用域逻辑就断了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
