@forward 是统一暴露接口的门禁，不加载执行变量，只决定外部可见性；需搭配 @use 才能在当前文件使用变量，且必须位于文件首行，配合 as 和 with 参数解决命名冲突与依赖问题。

直接说结论：@forward 不是用来“管理模块”的工具，而是用来“统一暴露接口”的门禁——它不加载、不执行、不注入变量，只决定外部能看见什么、以什么名字、在哪个命名空间下看见。

为什么@forward后本文件里用不了变量

常见错误现象：写了 @forward "colors"，紧接着就写 color: $primary-color;，编译报错 Undefined variable "$primary-color"。

这不是路径错，也不是拼写错，而是根本误解了 @forward 的行为：它只建立一条“下游可访问通道”，不把内容搬进当前作用域。

• 想在当前文件用变量？必须搭配 @use "colors"（且 @use 要写在 @forward 之后）
• @forward 必须是文件第一个有效语句，前面不能有注释、空行或任何其他内容
• 转发文件（如 _index.scss）里禁止定义新变量或 @mixin，否则这些内容不会被转发，还会干扰依赖链

@forward 怎么避免同名变量冲突

典型错误：两个模块都转发了 $radius-sm，Sass 直接报错 "$radius-sm" is already used——这不是 bug，是保护机制。

解决方式不是删掉一个，而是用 as 隔离命名空间：

• @forward "buttons" as btn-*; → 外部只能用 btn-$radius-sm
• @forward "cards" as card-*; → card-$radius-sm 和 btn-$radius-sm 天然不冲突
• 如果必须共用一个变量名（比如所有组件都依赖 $spacing-md），就得统一由基础层（如 core/vars）提供，其他模块只 @use 不转发

如何让一个入口文件同时支持 @use "kit" 和 @use "kit" as *

单靠 @forward "colors" 不行。入口文件（如 index.scss）必须组合 @use + @forward，且自身不定义任何逻辑：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

@use "core/variables" as core;
@use "utils/mixins" as utils;
@forward "core/variables" as core-*;
@forward "utils/mixins" as utils-*;

这样使用者才有两种选择：

• @use "index" as i; → 写 i.core-primary-color
• @use "index" as *; → 直接用 $primary-color 和 @include text-truncate

关键点：入口只是中转站，所有变量、函数、mixin 必须下沉到子模块；一旦你在 index.scss 里加了 $tmp: 12px;，它既不会被转发，又会破坏模块边界。

@forward 的 with 参数为什么改名后函数调用失败

错误写法：@forward "color" with ($primary as $brand);，然后外部调用 color.scale-lightness() 报 Undefined function。

原因不是改名出错，而是函数内部仍依赖未被转发的私有变量（比如 $colors），而 with 只改出口名，不重绑定函数作用域。

• with 只影响被转发模块中带 !default 的变量，不影响函数运行时查找路径
• 若函数依赖其他未转发的成员，必须一并透传：@forward "color" with ($colors as $colors, $primary as $brand)
• 调试建议：先去掉 with，用原始名称验证是否能跑通，确认问题是出在改名还是依赖缺失

真正容易被忽略的是：转发不是“复制粘贴”，而是“声明接口”。你控制的不是代码怎么跑，而是别人能怎么用——接口设计错了，后面所有调用都会卡在第一层。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！