@forward能避免样式重复注入和变量覆盖，它只暴露声明而不执行顶层css规则或触发变量重定义，支持精确导出控制、命名空间隔离及统一可配置入口，但要求路径严格对齐且必须配合@use使用。
@forward能避免样式重复注入和变量覆盖
直接用@import导入同一个_variables.scss十次，它就被编译十次——每次都会把$color-primary重新赋值，后导入的会静默覆盖前面的；而@forward只暴露声明，不执行顶层 CSS 规则，也不触发变量重定义。哪怕十个组件都@forward 'core/vars'，最终 CSS 里$color-primary仍只有一个值，且不会多出十份* { margin: 0 }。
- 只要被
@forward的文件里有顶层 CSS（比如.btn { ... }），这些规则仍会输出——但它不“自动注入作用域”，你得在真正@use它的文件里才生效 -
@import是边加载边执行，@forward是纯声明，编译器能据此做依赖分析和去重 - 变量覆盖问题常见于主题切换场景：老写法靠
@import顺序控制$theme，新写法用@forward 'theme' with ($mode: dark)透传配置，下游@use时直接拿到已预设值
@forward支持精确控制导出范围和命名空间
大型类库必须隐藏内部实现、防止下游误用私有函数，@forward提供show/hide和as语法，@use做不到这点。
-
@forward 'utils' hide debug-log, _internal-helper;→ 下游@use 'ui'后根本看不到这两个名字 -
@forward 'breakpoints' as bp-*;→ 下游只能写bp-max('md')，无法知道路径是utils/breakpoints，也避免和grid-*()冲突 - 多个模块导出同名
$radius？分别@forward 'buttons' as btn-*;和@forward 'cards' as card-*;，天然隔离
@forward让入口统一且可配置，但路径必须严格对齐
用户只需@use 'design-system'，就能访问颜色、断点、工具函数——这背后是design-system/_index.scss里一串@forward，不是魔法，是路径硬约束。
-
@forward路径是相对当前文件的，不是相对项目根目录；写@forward '../shared/colors'前，先确认这个相对路径下真有_colors.scss - 不能
@forward 'core'期望它自动加载整个文件夹；必须建core/_index.scss，里面逐个@forward 'vars'、@forward 'mixins'，再由主入口@forward 'core/index' - VS Code 插件跳转失效、
Can't find stylesheet to import报错，八成是路径拼错或没建_index.scss中转层
@forward必须配合@use才能真正使用，顺序不能错
@forward本身不加载任何东西，它只是“开个窗口”；你在转发文件里写$primary会直接报Undefined variable。
- 转发文件（如
_design-system.scss）里只能写@forward语句，不能调用@include或读变量 - 下游要真正用，得
@use 'design-system'，然后通过design-system.$primary访问 -
@forward必须写在@use之前：如果先@use 'colors'再@forward 'colors' with ($primary: red)，with就失效——因为@use已经用默认值初始化了变量
复杂点在于路径和顺序都是硬性约束，不是风格偏好；写错一行相对路径或颠倒两行指令，编译就失败，而且错误信息往往只说“找不到文件”，不会告诉你该去检查_index.scss是否存在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
