@forward 不生成 CSS，因它仅转发接口而不触发编译；CSS 输出需模块被 @use 加载且含顶层规则。
@forward 本身不管理样式，它只转发接口；真正管理样式的是子模块里的选择器规则，且必须被 @use 加载才会编译输出。
为什么只写 @forward 没生成任何 CSS？
因为 @forward 不执行、不加载、不触发编译——它只是声明“下游可以访问哪些成员”。哪怕 _buttons.scss 里写了 .btn { color: $primary-color; }，如果没人 @use "buttons"，这行 CSS 就永远不会进入编译流程。
- 常见错误：入口文件（如
_index.scss）只写@forward "buttons"，自身没写任何选择器 → 输出为空 CSS - 根本原因：Sass 编译 CSS 的前提是“该模块被
@use加载且含顶层规则”，@forward不满足任一条件 - 验证方式：在
_index.scss顶部加一行@use "buttons";，再编译，CSS 就出来了
@forward 路径和文件名必须严格匹配
Dart Sass 不会自动补全下划线或 .scss 后缀，路径错一个字符就报 Can't find stylesheet to import。
- 正确写法：
@forward "./components/_buttons.scss";✅（带./、下划线、后缀） - 错误写法：
@forward "buttons";❌（除非配置了 load path，否则找不到） - 错误写法：
@forward "components/buttons";❌（缺下划线，Dart Sass 默认只识别_*.scss） - 子模块若依赖
_reset.scss，别让每个都@use "reset"，统一在入口@use "reset"后@forward "reset"
多个模块导出同名变量（如 $radius-sm）怎么办？
Sass 会直接报错 "$radius-sm" is already used，这不是 bug，是作用域保护机制。
- 不能删掉一个变量，也不能靠加载顺序“碰运气”
- 必须用
as隔离命名空间：@forward "buttons" as btn-*;+@forward "cards" as card-*; - 下游只能用
btn-$radius-sm和card-$radius-sm，天然不冲突 - 如果真要共用一个值（比如所有组件都依赖
$spacing-md），必须由基础层（如_core.scss）唯一提供，其他模块只@use不@forward
如何让下游同时支持 @use "kit" 和 @use "kit" as *？
单靠 @forward 不行。入口文件必须组合 @use（触发编译 + 引入作用域）与 @forward（暴露接口），且自身不能定义新变量。
- 正确结构（
_kit.scss）：@use "core/variables" as core;<br>@use "utils/mixins" as util;<br>@forward "core/variables" as core-*;<br>@forward "utils/mixins" as util-*;
- 下游可选：
@use "kit" as k;→ 用k.core-primary-color；或@use "kit" as *;→ 直接用$primary-color - 关键点：入口文件是中转站，所有样式规则、函数、mixin 必须下沉到子模块；在
_kit.scss里写$tmp: 12px;，它既不会被转发，又破坏模块边界
最容易被忽略的点：你写的每一条 CSS 规则，最终是否输出，只取决于它所在的模块有没有被 @use 加载过——@forward 再多，不 @use 就等于没写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
