composes语法必须写在CSS规则体最前面，格式为composes: className from './file.module.css'，仅支持单类名、禁止空格或伪类；跨文件引用需带.module.css后缀，同一文件多类组合用空格分隔。
composes语法怎么写才不报错
直接在CSS文件里用composes组合类名，比JS里拼字符串更安全。它不是运行时合并，而是编译期把目标类的哈希名也塞进当前类的输出中，两个类名都会生效。
常见错误是顺序不对或跨文件引用路径错：
-
composes声明必须放在规则体最前面，否则会被忽略 - 跨文件引用要写对相对路径：
composes: base from './Base.module.css'，不能漏掉.module.css后缀 - 不能
composes一个带空格的选择器，比如.btn .primary——只支持单个类名（如.btn） - 同一文件内组合多个类时，用空格分隔：
composes: theme padding from './shared.module.css'; composes: hover;
JS里动态加多个class怎么避免“裸奔”
一旦混入字符串拼接，CSS Modules就管不住那些类名了——比如className={`${styles.container} ${theme}-mode`}里的-mode不会被哈希，变成全局暴露的类名，容易冲突或失效。
安全做法只有两种：
立即学习“前端免费学习笔记（深入）”；
- 所有可能变化的类名，提前定义在
.module.css里，比如.dark-mode、.large-btn，然后用styles['dark-mode']取值 - 用
clsx这类工具，但它只拼字符串，不处理作用域——你传进去的每个值都得是合法的styles.xxx或明确包裹了:global()的类 - 别写
className={styles.a + ' ' + styles.b}，ES6模板字符串也一样危险，只要中间有非styles.xxx的字符串，局部性就破了
:global()和交集选择器混用时容易踩什么坑
想同时用局部类和第三方全局类（比如Bootstrap的.btn），光写className={`${styles.primary} btn`}不行——btn没被:global()声明，会被CSS Modules当成局部类去哈希，结果找不到样式。
正确做法是统一收口：
- 建一个
globals.css，里面集中写:global(.btn), :global(.text-center)等，再用@import './globals.css'引入 - 不要在组件CSS里零散写
:global(.btn)，否则维护成本高，还容易漏 - 交集选择器（如
.btn.primary）必须确保两个类都在同一个HTML元素上；如果.primary是CSS Modules生成的局部类，而.btn是:global()放行的，那className={`${styles.primary} btn`}就能生效——但前提是btn真被:global()兜住了
为什么不用@extend而坚持composes
@extend是Sass语法，在CSS Modules生态里根本不存在；有人误以为composes是它的平替，其实不是——composes是CSS Modules原生能力，作用是组合类名，不是继承样式声明。
关键区别在于输出结果：
-
composes: btn from './base.css'→ 编译后className里会同时出现MyButton_button__xyz和Base_btn__abc两个类名 - 如果用Sass的
@extend .btn，实际是把.btn的CSS规则复制到当前选择器下，破坏局部隔离，且无法配合CSS Modules的哈希机制 - SSR场景下，
composes能保证服务端和客户端生成完全一致的类名组合；@extend做不到这点
真正容易被忽略的是：composes只认单类名，不支持伪类、属性选择器或后代选择器——哪怕你写composes: .btn:hover，构建也会静默失败，控制台没报错，样式就是不生效。
