使用 CSS Modules 可使类名仅在当前组件生效：需将文件命名为 .module.css（或对应预处理器后缀），构建工具（如 Webpack 需配置 css-loader modules: true，Vite 默认支持）自动将其类名编译为带哈希的唯一标识并导出映射，React 中通过 import styles from './X.module.css' 后用 styles.xxx 引用，Vue 中用 和 $style.xxx；嵌套选择器需避免后代写法，改用 :hover 等伪类直接附加或 composes 复用，全局穿透须用 :global()；常见问题包括文件名错误、路径错误、预处理器 loader 顺序不当、动态拼接时混入非 styles 字符串，以及 @import 的非模块化文件仍为全局。
怎么让CSS类名只在当前组件生效
直接用 CSS Modules，它不是新语法，而是构建工具（如 Webpack、Vite）对 .module.css 文件的自动处理机制：把类名编译成带哈希的唯一标识，同时导出映射关系。不改写 HTML 结构，也不依赖 BEM 命名约定，靠构建时重命名解决冲突。
关键点：文件名必须带 .module.css（或 .module.scss 等），否则 loader 不会启用模块化逻辑。
- Webpack 默认需配置
css-loader的modules: true；Vite 开箱支持，只要后缀是.module.css - React 中用
import styles from './Button.module.css'，再通过styles.button引用类名 - Vue 单文件组件里用
<style module></style>，模板中通过$style.button绑定
CSS Modules 里怎么写嵌套和伪类
不能直接写 .container .item 这种后代选择器——模块化后两个类名会被分别哈希，选择器失效。必须用组合式写法，或借助 :global() 显式退出局部作用域。
- 推荐写法：
.button { color: blue; }+.button:hover { color: red; }，伪类自动绑定到同一哈希类上 - 需要嵌套样式时，用
composes复用其他模块类：.primary { composes: button from './Base.module.css'; } - 真要穿透全局（比如覆盖第三方库），必须包在
:global(.third-party-class) { ... }里，否则无效 -
:local(.name)是默认行为，可省略；:global(.name)才是显式声明
为什么 className={styles.xxx} 在 React 里有时是 undefined
常见于文件没按规则命名，或 import 路径写错，导致 styles 是空对象。不是语法错误，是构建阶段没生成映射表。
立即学习“前端免费学习笔记（深入）”；
- 检查文件后缀是不是
.module.css，不是.css或.scss - 确认 import 路径正确，大小写敏感，尤其在 macOS/Linux 上
- 如果用了 CSS 预处理器（如 Sass），确保对应 loader（如
sass-loader）在css-loader之前执行 - Vite 用户注意：默认只对
.module.css启用，.module.scss同样支持，但.module.sass需额外配置
动态类名拼接为什么失效
className={styles.base + ' ' + styles.active} 这种写法没问题，但 className={`base ${styles.active}`} 里的 base 是字符串字面量，不会被模块化，结果就是全局类名，可能冲突或无样式。
- 所有类名都必须来自
styles对象，哪怕只是基础类：className={styles.base + ' ' + styles.active} - 用
clsx或classnames库时，传入的必须是styles.xxx，不能混入字符串 - 服务端渲染（SSR）场景下，确保构建工具对
.module.css的处理在两端一致，否则哈希值不同会导致水合失败
最易忽略的是：CSS Modules 不处理 @import 的外部文件——被 import 的文件若没加 .module 后缀，它的类名不会被哈希，照样全局污染。
