样式能力矩阵
支持范围矩阵
| 能力 | 状态 | 输出行为 |
|---|---|---|
首个 style 块提取 | 支持 | 生成独立 css 文件并注入导入 |
scoped | 支持 | 生成作用域标识并注入节点属性 |
module | 支持 | 生成 .module.css 风格产物并映射模块名 |
less 语言 | 支持 | 预转换为 css 之后正常处理 |
sass 语言 | 支持 | 预转换为 css 之后正常处理 |
约束与限制
| 场景 | 状态 | 说明 |
|---|---|---|
多个 style 块 | 不完整支持 | 仅首个生效，其余告警 |
cssVars | 不支持 | 解析阶段会报不支持 |
scoped + @import | 部分支持 | 导入内容可能保留全局影响 |
输出文件规律
典型输出（示意）：
txt
.vureact/dist/src/components/
├─ Counter.tsx
├─ counter-<hash>.css
└─ counter-<hash>.module.css说明：
- 普通 scoped 样式会带 hash 后缀
- module 样式会生成 module 文件名
- 组件产物会自动插入对应样式导入
- 如果关闭对 less/sass 的预处理，则生成对应样式文件，如
.less，且对 scoped 忽略处理
推荐实践
- 每个 SFC 保持单一 style 块
- 优先 scoped/module，减少全局耦合
@import场景上线前做回归测试
与迁移策略的关系
样式是迁移中的高风险面。建议先建立样式约束基线，再扩大模块迁移范围。