@forward 仅建立导出通道而不生成 CSS，真正编译样式需子模块含选择器且被 @use 加载；入口文件须组合 @use（触发编译）与 @forward（导出接口），路径须带下划线和 .scss 后缀，命名冲突用 as 前缀解决，顶部禁止注释或空行。
@forward 本身不生成任何 CSS，它只建立访问通道——想让下游拿到变量、mixin，又同时编译出按钮、表单等样式，必须让被转发的模块自己完成样式定义，并确保它们已正确加载依赖。
为什么只写 @forward "buttons" 却没生成 CSS？
因为 @forward 不触发编译，也不执行样式逻辑。它只是“声明导出接口”，类似 TypeScript 的 export。真正生成 CSS 的，是那些写了选择器（如 .btn { ... }）并已被 @use 加载的模块。
- _buttons.scss 里写了
.btn { color: $primary-color; }，但没@use "colors"→ 编译直接报错，根本走不到 CSS 输出那步 - 入口文件（如
_index.scss）只写@forward "buttons"，自身没写任何规则 → 它是空的，自然无 CSS - 被转发模块内部用了
@import或未加后缀的路径（如@use "mixins"）→ Dart Sass 无法识别，加载失败
如何让下游 @use "kit" 同时获得 CSS 和变量？
入口文件不能只靠 @forward，必须组合 @use + @forward，且所有样式定义必须下沉到子模块中。
- 在
_kit.scss顶部先@use "buttons"、@use "forms"→ 确保这些模块的 CSS 被实际加载并编译 - 再写
@forward "buttons"; @forward "forms";→ 把它们的变量、mixin、占位符等成员统一导出 - 路径必须带下划线和
.scss后缀：@forward "./components/_buttons.scss";✅，@forward "buttons"❌（除非配置了 load path） - 若组件都依赖
_reset.scss，别让每个模块都@use "reset"，而是在_kit.scss里@use "reset"一次，再@forward "reset"，其他子模块去掉自己的@use
多个模块都导出 $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: 16px），否则它不会被自动转发，还会干扰依赖链 - 若必须暴露本文件定义的内容，得显式写
@forward "utils" as utils-*;，默认@forward只转发它@use进来的成员 -
with参数只影响被转发模块中带!default的变量，且as必须写在with之后：@forward "colors" with ($primary: red) as color-*;✅
最易忽略的一点：转发文件（如 _index.scss）顶部不能有注释或空行，@forward 必须是第一个有效语句；否则整个转发链可能静默失效，而错误信息往往不提示这点。
