composes是CSS Modules中唯一可靠的跨文件样式复用机制，它在编译期将目标类的哈希化类名合并进当前类，确保作用域隔离与无冲突继承，不支持动态路径、@import或@extend混用。
composes 关键字是唯一可靠的方式
CSS Modules 本身不支持“跨文件直接复用类名”，composes 是官方设计的、构建时解析的样式继承机制，不是运行时行为，也不依赖 CSS 选择器权重。它在编译阶段就把目标样式规则合并进当前类，最终输出一个新类名，避免了全局污染和覆盖风险。
常见错误是试图用 @import 或 @extend（Sass）混入模块化 CSS 文件——这些在启用 modules: true 后会被忽略或报错，因为 CSS Modules 已接管类名解析逻辑。
-
composes必须写在目标类定义内部，不能放在文件顶部或注释后 - 被继承的类必须来自另一个
.module.css文件（或同文件内已定义的局部类） - 路径必须是相对路径，且需带引号：
composes: base from './Base.module.css'; - 不支持动态路径或变量拼接，也不能跨包（如
node_modules中未做模块化导出的 CSS）
如何正确组织 base 样式文件
基础样式（如 .button、.input）应单独抽成 Base.module.css，并确保所有子组件只 import 它一次。不要把基础样式写在某个具体组件的 module 文件里，否则会因哈希不同导致重复生成、体积膨胀。
示例结构：
src/ ├── styles/ │ └── Base.module.css ← 公共基础类（.baseButton, .baseInput） ├── components/ │ ├── Button.module.css ← composes: baseButton from '../styles/Base.module.css' │ └── Input.module.css ← composes: baseInput from '../styles/Base.module.css'
注意：Base.module.css 本身也需是 .module.css 后缀，否则 css-loader 不会启用模块化处理，composes 将无法解析目标类。
遇到 “composes not found” 错误怎么办
典型报错信息是：Module build failed: Error: composes "xxx" from "./yyy.css" not found。根本原因不是路径错，而是目标文件没被识别为 CSS Modules 模块。
- 检查被引用文件是否以
.module.css（或.module.scss）结尾；.css后缀默认不启用 modules - 确认 webpack/vite 配置中
css-loader的modules选项对目标文件生效（例如，某些配置会 exclude/node_modules/，但你又想引用本地styles/下的文件） - 如果使用 Sass，确保
importLoaders: 1已设置，否则composes语句可能在 Sass 编译前就被 css-loader 处理，导致路径解析失败 - 别在
:global()块里写composes——它只作用于局部类
为什么不用 CSS 变量代替 composes
CSS 变量（--primary-color）适合传值，不适合传整套规则。比如你想复用 padding、border-radius、font-size 等组合声明，用变量就得每个属性单独定义+调用，而 composes 一行就继承全部声明，且保持作用域隔离。
二者定位不同：
-
composes解决的是「样式结构复用」，输出的是确定的、哈希化的类名 - CSS 变量解决的是「值动态注入」，需要 JS 或 root 作用域配合，调试时看不到原始类名语义
- 混合使用合理：用
composes继承布局和结构，用 CSS 变量控制颜色、间距等可变值
真正容易被忽略的是：composes 的继承链不能过长。超过两层（A → B → C）会导致构建产物中冗余类名增多，且调试时难以追溯原始来源——建议基础类最多一层继承，业务组件直接 compose 基础类，而非 compose 其他业务类。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
