@forward是接口声明而非导入，仅重新发布模块成员而不加载执行；需用as、hide、show等显式控制暴露范围、命名前缀与私有屏蔽，确保组件库导出可控。
@forward 不是“导入”，而是“接口声明”
很多人误以为 @forward 是 @use 的增强版，其实它根本不在同一层：你不能在写了 @forward "mixins" 的文件里直接调用 mixins.flex-center()，它不加载、不执行、不注入任何样式——只告诉上游“我这个模块对外提供这些能力”。这正是组件库导出的底层逻辑：你发布一个 ui/index.scss，用户 @use "ui" 后能访问 ui.$spacing-sm，但你完全控制了哪些变量/mixin/函数被暴露、是否加前缀、是否隐藏内部实现。
为什么 @use 单独做不到干净导出
@use 是消费行为，不是封装行为。如果只靠 @use，组件库使用者必须逐个 @use "ui/colors"、@use "ui/breakpoints"、@use "ui/mixins"，既破坏入口统一性，又让使用者感知到内部目录结构。更关键的是：
- 无法隐藏私有成员：
@use本身不提供“转发时过滤”的能力，所有公开成员都会透出 - 无法统一配置：比如你想让用户自定义
$primary-color，但只允许在入口层传一次参数，@use每个模块单独with会失控 - 命名空间污染风险：多个
@use导入同名变量（如都叫$radius），不加as就冲突，加了又冗长
@forward 的三个关键控制能力
真正让导出可控的，是 @forward 提供的显式修饰语法：
-
@forward "vars" as var-*;：所有变量自动加var-前缀，彻底规避命名冲突，下游写var.$primary而非裸名$primary -
@forward "theme" hide $dark-mode;：主动屏蔽未完成或不建议外部使用的内部变量，防止误用 -
@forward "mixins" show flex-center, clearfix;：只暴露明确设计为公共 API 的@mixin，其余全部隔离
这些能力在 @use 中不存在，也无法组合模拟。
立即学习“前端免费学习笔记（深入）”；
路径别名和包结构必须严格对齐
@forward 后面的路径不是逻辑别名，而是真实文件系统路径。常见错误是想用 @forward "core" 一次性导出整个文件夹——不行，SCSS 不支持目录级转发。正确做法是：
- 在
core/_index.scss里写@forward "vars"; @forward "mixins"; - 再在主入口
ui/_index.scss中写@forward "core/index"; @forward "components/button"; - 使用者只能
@use "ui"，路径层级和文件结构必须一一对应，否则编译报错Can't find stylesheet to import
VS Code 插件跳转失效、构建失败、变量找不到——八成是路径没对齐，而不是语法写错。
