@forward 只转发变量、函数、混入和占位符选择器，不转发普通 CSS 规则；要输出样式必须配合 @use（或 @import），且目标模块需含顶层 CSS 声明。
用 @forward 转发模块时，样式不会自动合并
直接写 @forward "button" 不会把 button.scss 里的 CSS 规则注入当前文件——它只转发变量、函数、混入和占位符选择器，不转发普通 CSS 声明。这是最常被误解的一点。
如果你期望“合并样式”，实际需要的是 @use + 手动调用，或改用 @import（不推荐）。
-
@forward的核心用途是构建可组合的命名空间：比如在index.scss中@forward "button" as button-*;，让下游通过button-primary访问混入 - 转发后仍需在目标文件中
@use该路径，才能使用其成员；转发本身不触发 CSS 输出 - 多个
@forward到同一模块不会报错，但不会叠加样式——CSS 规则仍只来自最终@use或@import的地方
@forward 后如何真正输出 CSS？
必须配合 @use（或旧式 @import），且目标模块里要有顶层 CSS 规则。
例如：
立即学习“前端免费学习笔记（深入）”；
// _theme.scss
$primary: #007bff;
// 这行不会被转发出去，但会被 @use 触发
.button {
background: $primary;
}
// index.scss @forward "theme"; // 只转发 $primary，不转发 .button @use "theme"; // 这行才会让 .button 生效
- 只有
@use "theme"（或@import "theme"）才会把.button输出到 CSS -
@forward和@use可以共存于同一文件，顺序无关，但语义不同：前者是“我提供这个模块”，后者是“我需要它的样式” - 如果只想暴露变量/混入，不想输出样式，就把 CSS 规则移到单独的
_base.scss并只@use它
想合并多个模块的 CSS？别依赖 @forward
@forward 不是 @import 的替代品，它不拼接 CSS 流。要合并样式，可靠方式只有两种：
- 在入口文件（如
main.scss）中逐个@use各模块：@use "button"; @use "form"; @use "grid"; - 用
@use后显式调用混入，比如@include button.base(); @include form.reset(); - 避免用
@forward+@use组合来“偷懒合并”——这只会增加命名空间层级，却对 CSS 输出无影响
注意：Sass 已废弃 @import，但它确实能合并 CSS；迁移到模块系统后，“合并”这件事必须由开发者显式控制，没有隐藏通道。
转发时重命名与条件过滤容易出错
@forward "mixins" as mixins-*; 看似简单，但一旦混入名含连字符或数字，就会报错：Invalid Sass identifier。
- 重命名只支持字母+下划线开头，不能用
-或数字打头，例如as utility-合法，但as 2col-非法 -
with参数只能覆盖变量默认值，不能覆盖混入或函数定义；试图覆盖$breakpoints没问题，覆盖@mixin clearfix就会忽略 - 用
hide或show过滤成员时，名称必须完全匹配，包括下划线/大小写：hide: clear-float不会隐藏clearfix
转发不是“导入快照”，它是活的引用——上游模块改了变量值，所有 @use 它的地方都会响应变化，这点和 @import 的静态复制完全不同。
