@forward 本身不生成 css，仅声明导出接口；必须在被转发模块内完成样式定义并显式 @use 所有依赖，否则无输出或报错。
只写 @forward 不会生成任何 CSS，必须让被转发的模块自身完成样式定义，且它已正确加载全部依赖变量和 mixin。
为什么写了 @forward 却没编译出 CSS
因为 @forward 本身不执行编译、不触发样式生成，它只是“声明导出接口”。常见错误包括：
- 入口文件（如
_index.scss）只写@forward "buttons"，但没写任何选择器或规则 → 文件为空，自然无输出 -
_buttons.scss里用了$primary-color，却没@use "colors"→ 编译直接报错，根本走不到 CSS 生成那步 - 误以为转发后变量会自动注入当前模块 → 实际上
@forward不把内容搬进来，只控制“外部能否访问”
怎样让 @forward 同时导出样式和逻辑成员
关键是在被转发的子模块内部完成样式定义，并确保它已显式 @use 所有依赖。例如：
— _buttons.scss 必须自己 @use "colors" 和 @use "mixins"，再写实际样式：
@include hover-state;<br>color: $primary-color;
— 入口文件 _index.scss 写：
@forward "buttons";<br>@forward "forms";
这样下游 @use "index" 后，既能调用 index.button()，也会把 buttons 和 forms 的所有 CSS 一起编译进来。
注意路径：必须用带下划线和 .scss 后缀的相对路径，@forward "./components/_buttons.scss" ✅，@forward "buttons" ❌（除非配置了 load path）
如何避免多个组件重复注入同一套基础样式
比如 _buttons.scss 和 _cards.scss 都 @use "mixins/reset"，会导致 reset 的 CSS 被注入两次。
解决方法有两种：
- 让基础样式只在聚合层加载一次：
_index.scss先@use "mixins/reset"，再@forward "buttons"和@forward "cards"，且两个组件模块内部删掉对reset的@use - 改用
@forward "mixins/reset" as reset-*，并确保_reset.scss里只有@mixin，没有顶层选择器（即不输出 CSS）
Dart Sass 会自动去重同一模块的多次 @use，但 @forward 是透传，不改变加载行为 —— 所以重复 @use 仍会发生。
@forward + @use 组合才能兼容多种导入方式
想让使用者既能 @use "kit"，也能 @use "kit" as *，单靠 @forward 不行。入口文件必须组合使用：
@use "core/variables" as core;<br>@use "utils/mixins" as utils;<br>@forward "core/variables" as core-*;<br>@forward "utils/mixins" as utils-*;
这样：
-
@use "kit" as k→ 可用k.core-primary-color -
@use "kit" as *→ 可直接用$primary-color和@include text-truncate
切记：入口文件不能定义任何新变量或 mixin，否则转发规则会失控；所有逻辑必须下沉到子模块。
最易忽略的一点是：@forward 的 with 参数只改名，不重绑定作用域 —— 如果你把 color.scale-lightness() 转发为 lighten-color()，但它内部仍依赖未被转发的 $colors，就会报错。调试时建议先删掉 with，用原始名称验证是否能跑通。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
