必须用import styles from './xxx.module.scss'导入并styles.className访问，因CSS Modules将.textContainer编译为textContainer__abc123等哈希名，仅通过styles对象映射；直接写className="textContainer"会使DOM中类名为原始字符串，无法匹配编译后样式规则。
必须用 import styles from './xxx.module.scss' 导入，再通过 styles.className 访问，不能直接写字符串类名。
为什么不能直接写 className="textContainer"？
CSS Modules 会把 .textContainer 编译成类似 textContainer__abc123 的哈希类名，且只在 JS 对象中暴露映射关系。直接写字符串 "textContainer" 会被原样输出到 DOM，浏览器找不到对应样式规则。
- ❌ 错误：
className="textContainer"→ 实际 class 属性值就是textContainer，无样式生效 - ✅ 正确：
className={styles.textContainer}→ 值为textContainer__abc123，匹配编译后 CSS - ⚠️ 注意：文件名必须含
.module.scss后缀（如Button.module.scss），否则 Webpack 不启用模块化
import styles from 的路径和导出行为
Webpack（或 Vite/Next.js）对 .module.scss 文件默认做模块化处理，生成一个具名对象，不支持 default 导出。
- ✅ 正确导入：
import styles from './Header.module.scss'（必须是命名导入） - ❌ 错误导入：
import * as styles from './Header.module.scss'或import { textContainer } from './Header.module.scss'—— 没有具名导出，只有默认对象 - 路径需准确：若文件在
src/components/Header/Header.module.scss，则 import 路径应为./Header.module.scss（相对路径），不是@/components/Header...—— Sass 默认不解析 TypeScript 路径别名
混合使用模块化类与全局类时的拼接写法
当需要同时应用模块化类（如 styles.textContainer）和全局类（如 animate fadeInUp）时，模板字符串是安全、直观的方式。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
className={`${styles.textContainer} animate fadeInUp`}—— 全局类名不带点号，直接写字符串 - ❌ 错误：
className={`${styles.textContainer} .animate`}—— 点号变成 class 属性值的一部分，浏览器识别为两个类：textContainer__abc123和.animate（后者无效） - ⚠️ 全局样式必须已引入：比如
import '../../animate.scss'，否则animate类根本不存在 - 推荐用
clsx库管理条件类：className={clsx(styles.textContainer, 'animate', isLoaded && 'fadeInUp')}
开发时常见失效原因
样式没生效，大概率不是写法问题，而是构建或加载环节断了。
- 文件后缀写错：写了
Header.scss却当Header.module.scss用 —— 模块化不会触发 - Sass 变量未被正确解析：用了
@use '@/styles/variables'，但 Webpack/Vite 未配置sassOptions.resolveUrl，导致路径报错 - 热更新失效：修改了被
@use的_mixins.scss，但 dev server 没监听该文件变动（CRA v5.1 以下需手动重启） - 嵌套过深导致选择器冗余：SCSS 中
.a .b .c .d { ... }编译后仍有效，但影响性能，也容易因优先级被覆盖
最易被忽略的一点：CSS Modules 的作用域隔离是单向的——它保护组件内部不被外部干扰，但也意味着你无法靠父组件加个 class 就改变子组件内伪类（:hover）的颜色。这时候得靠 CSS 变量 + var(--hover-color, #007bff) 来解耦，而不是硬拼 class 字符串。
