<p>@forward 是组件库的接口控制开关,决定成员的可见性、命名与命名空间;它仅重新发布而非注入内容,需用 as *、as prefix- 或 with 显式暴露,避免命名冲突并确保依赖完整。</p>

直接说结论:@forward 不是“为了导出而导出”,它是构建可维护组件库的**接口控制开关**——决定哪些成员能被外部看到、以什么名字、在什么命名空间下被访问。
为什么 @forward 导出后变量还是找不到?
根本不是路径或拼写错误,而是误以为 @forward 会把内容“注入”当前模块。它只做一件事:把目标模块的内容“重新发布出去”。如果你在 _theme.scss 里只写 @forward "colors",那 @use "theme" 的文件里依然拿不到 $primary-color,因为 theme 模块自身没定义它,也没显式暴露它。
必须加 as * 或 as prefix- 才能让外部访问到:
-
@forward "colors" as *;→ 外部@use "theme" as *可直接用$primary-color -
@forward "colors" as color-*;→ 外部得写color-primary-color - 若只转发部分成员,必须用
with显式声明:@forward "spacing" with ($spacing-md as $s-md);
多个 @forward 转发同名变量为什么会报错?
编译器会严格检查命名冲突。比如两个子模块都转发了 $radius-sm,哪怕值不同,Sass 也会报 "name is already used"。
立即学习“前端免费学习笔记(深入)”;
常见触发场景:
- 工具包入口
index.scss同时@forward "utils/spacing"和@forward "components/card",而两者都定义并转发了$radius-sm - 用
show精确控制时漏写了重命名:@forward "a" show $radius-sm; @forward "b" show $radius-sm;→ 冲突 - 解决方案只有两个:统一由基础层提供,或用
with改名:@forward "a" with ($radius-sm as $a-radius); @forward "b" with ($radius-sm as $b-radius);
如何让组件库同时支持 @use "kit" 和 @use "kit" as *?
不能只靠一个 @forward。入口文件(如 index.scss)要组合使用 @use + @forward:
@use "base/variables" as base; @use "utils/mixins" as utils; @forward "base/variables" as base-*; @forward "utils/mixins" as utils-*;
这样:
- 想用命名空间的用户写
@use "index" as i;→i.base-primary-color - 想通配导入的用户写
@use "index" as *;→ 直接用$primary-color和@include text-truncate - 关键点:入口文件里**不定义任何新变量或 mixin**,所有逻辑下沉,否则转发规则会失控
最容易被忽略的一点:转发函数时,with 改名只影响调用签名,不影响函数内部对其他未转发成员的依赖。比如你把 color.scale-lightness() 转发为 lighten-color(),但它内部用了未被转发的 $colors,照样报 Undefined variable —— 这时候得补上 @forward "colors" as *; 或明确 with ($colors as $colors)。


















