CSS模块化必须使用import styles from './X.module.css'，文件名严格匹配.module.后缀，否则样式全局生效；仅支持.className语法，禁止字符串拼接或运行时索引；:global()仅在顶层或后代选择器中有效。
必须用 import styles from './X.module.css' 导入，且文件名严格匹配 .module.css（或 .module.scss 等），否则样式仍是全局的——这不是配置问题，是构建工具的硬性文件名约定。
文件名不带 .module. 后缀，样式就不是局部的
CRA、Vite、Webpack 默认只对 /\.module\.(css|scss|sass|less|styl)$/ 这类文件启用模块化逻辑。写成 Button.css 或 Button.modules.css，哪怕内容一模一样，import styles from 也会返回空对象或原始类名，最终 DOM 中出现的是未哈希的 className="button"，直接污染全局。
-
Button.module.css✅ 正确 -
Header.module.scss✅ 正确（需项目支持 sass-loader） -
Dialog.module.less✅ 正确（需 less-loader） -
Button.css❌ 全局注入 -
button.Module.CSS❌ 大小写不敏感但易出错，推荐全小写 -
Button.module.scssx❌ 后缀不匹配，被忽略
import styles from 是唯一合法导入方式
写成 import './Button.module.css' 或 import * as styles from './Button.module.css' 都不行：
前者是全局引入，后者在 CRA 中通常返回空对象。
已弃用 — 请改用 `auth0` 技能（运行 `npx clawhub install auth0`）。适用于为 React 单页应用（SPA）添加 Auth0 登录、登出、受保护路由或用户会话功能。该技能集成 `@auth0/auth0-react` — 即使用户仅表述为“为我的 React 应用添加登录功能”或“保护我的 React 路由”，而未明确提及 Auth0，也应使用此技能。
- ✅ 必须是
import styles from './Button.module.css' - ✅ 使用时只能是
className={styles.button}，不能拼字符串：className={`button ${styles.primary}`}会失效 - ✅ 条件组合多个类必须用
clsx或classnames：className={clsx(styles.button, props.large && styles.large)} - ❌
className={styles['btn-' + type]}运行时为undefined，TS 直接报错
:global() 只能在顶层或后代选择器中生效
它不是“退出模块”的万能开关，而是有明确语法边界：
立即学习“前端免费学习笔记（深入）”；
- ✅
:global(.third-party-modal) { z-index: 9999; }—— 顶层使用，输出真实类名 - ✅
.container :global(.icon) { ... }—— 作为后代选择器的一部分 - ❌
.container { :global(.icon) { ... } }—— 嵌套在局部规则块内，会被 loader 忽略 - ❌
:local(.title)—— 冗余且部分 loader 不识别，:local是默认行为
真正容易被忽略的是：所有嵌套写法（如 .container { .item { } }）中的子选择器不会被哈希，依赖父选择器的哈希结果才能生效；而 composes 继承必须显式声明路径，不能跨包或相对路径错误。
