必须用 @use 加载底层模块，@forward 仅控制可见性；单独使用 @forward 无法在当前文件使用变量，需额外 @use；入口文件须组合 @use + @forward，样式须下沉子模块；路径须带下划线和 .scss 后缀；同名变量冲突应统一基础层定义或用 as 隔离命名空间。
必须用 @use 做底层模块加载，@forward 只能当“门禁”用——它不执行、不注入、不编译样式，只控制外部可见性。单靠 @forward 写个入口文件就想导出整套组件，必然漏样式、缺变量、报 Undefined variable。
为什么 @forward 后本文件里用不了变量
常见错误现象：@forward "tokens" 后直接写 color: $color-primary，编译报错。这不是路径或拼写问题，是根本误解了 @forward 的行为：它只建立一条“下游可访问通道”，不会把 $color-primary 搬进当前作用域。
- 想在当前文件使用变量？必须额外加一行
@use "tokens" as t，且@use要写在@forward之后 -
@forward必须是文件第一个有效语句，前面不能有空行、注释或任何其他内容 - 转发文件（如
_index.scss）里禁止定义新变量或@mixin，否则这些内容既不会被转发，还会破坏模块边界
怎样让 @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"
如何避免多模块转发同名变量导致冲突
Sass 编译器会直接报 "$radius-sm" is already used，这不是 bug，是作用域保护机制。比如 buttons 和 cards 都转发了 $radius-sm，就会失败。
- 最稳妥的解法：统一由基础层（如
_foundations.scss）提供$radius-sm，其他模块只@use不转发 - 若必须保留各自定义，就用
as隔离命名空间：@forward "buttons" as btn-*、@forward "cards" as card-*，外部调用时自然区分成btn-$radius-sm和card-$radius-sm - 用
with改名要小心：@forward "buttons" with ($radius-sm as $btn-radius)可行，但函数内部仍依赖原模块的其他未转发变量，容易报Undefined function
真正难的不是写对第一组 @use + @forward，而是让每个新增组件都严格遵守“子模块定义 → 入口 @use → 入口 @forward → 下游命名空间访问”这条链路。松动一次，模块边界就从代码里消失，变成靠文档和人肉记忆维系的脆弱约定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
