@forward仅控制成员可见性,不注入作用域;需配合@use才能使用变量,且必须为首条有效语句;入口文件需用@use+@forward组合实现命名空间控制与共享变量收口。

@forward 本身不“统一转发”,它只做一件事:控制哪些成员能从当前文件被外部看到。所谓“统一管理”,其实是靠入口文件(如 _index.scss)里一连串 @forward 语句 + 合理的目录结构 + 严格遵守规则来实现的。
为什么直接写 @forward "colors" 后本文件用不了变量
因为 @forward 不加载、不执行、不注入作用域——它只是开一扇窗,不搬家具进来。你在转发文件里紧接着写 color: $primary-color,必然报 Undefined variable "$primary-color"。
- 想在当前文件用变量?必须额外加一行
@use "colors",且@use要写在@forward之后 -
@forward必须是文件第一个有效语句:前面不能有空行、注释或任何 CSS 规则 - 转发文件自身定义的变量(比如
$tmp: 12px)默认不会被转发出去,除非显式用as *或with
如何让一个入口文件同时支持 @use "kit" 和 @use "kit" as *
单靠 @forward "colors" 不行。入口文件(如 _index.scss)必须组合 @use + @forward,且自身不定义任何新变量或 @mixin。
- 正确写法:
@use "core/variables" as core;<br>@use "utils/mixins" as utils;<br>@forward "core/variables" as core-*;<br>@forward "utils/mixins" as utils-*;
- 这样使用者可选:
@use "index" as i→ 用i.core-primary-color;或@use "index" as *→ 直接用$primary-color - 一旦你在
_index.scss里加了$tmp: 12px,它既不会被转发,又会破坏模块边界
多个模块都转发 $radius-sm 时怎么避免冲突
Sass 遇到同名成员被多次转发会直接报错:"$radius-sm" is already used。这不是 bug,是保护机制。
- 最稳妥解法:把这类共享变量统一收口到基础层(如
core/_vars.scss),其他模块只@use不转发 - 需要隔离命名空间时,用
as前缀:@forward "buttons" as btn-*;→ 外部用btn-$radius-sm - 若必须改名转发,用
with:@forward "cards" with ($radius-sm as $card-radius-sm);,但注意函数内部仍依赖原模块作用域
真正容易被忽略的点是路径和顺序:所有 @forward 路径都是相对于当前文件的,不是项目根目录;@forward 和 @use 同时存在时,@forward 必须写在前面,否则下游 with 配置可能失效。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











