@use 替换 @import 必然失败，因变量不再自动进入全局作用域，所有访问需加命名空间前缀；@forward 仅控制导出内容，不加载模块，入口文件须严格禁止定义变量或CSS规则。
直接替换 @import 为 @use 必然失败——这不是路径或拼写问题，而是模块系统底层逻辑变了：变量不再自动进全局，所有访问必须带命名空间前缀。
为什么 @use 替换 @import 后大量报 Undefined variable
因为 @use 默认创建私有作用域，$primary-color 这类写法是在找全局变量，但它实际只存在于 colors.$primary-color 中。旧代码里所有裸变量、裸 mixin 调用都得加前缀。
-
@use "variables" as v;→ 必须写v.$primary-color，不能省略v. - 别用
@use "variables" as *;—— Dart Sass 5.0+ 已明确禁止该语法 - 路径必须精确匹配下划线开头的 partial 文件：
@use "colors"只认_colors.scss，不认colors.scss或colors.css - 所有
@use必须放在文件最顶部，前面不能有空行、注释或任何 CSS 规则
怎样用 @forward 构建安全的统一入口（如 index.scss）
@forward 不是“导出内容”，而是“开门放行”——它只决定外部能看见什么，不把内容加载进当前文件。想在入口文件里自己用变量？还得补一句 @use。
- 入口文件（如
_index.scss）只能做两件事：@use子模块 +@forward暴露成员 - 禁止定义新变量、
@mixin或写任何 CSS 规则，否则这些内容既不会被转发，又会破坏模块边界 - 要同时支持
@use "index" as *和@use "index" as i;，得组合写：@use "core/variables" as core;<br>@use "utils/mixins" as utils;<br>@forward "core/variables" as core-*;<br>@forward "utils/mixins" as utils-*;
- 多个模块都含
$radius-sm？Sass 会直接报错。解决办法是用as btn-*和as card-*隔离前缀
@forward 的 with 参数为什么改名后函数调用仍失败
错误写法：@forward "color" with ($primary as $brand);，然后调用 color.scale-lightness() 报 Undefined function。这不是改名的问题，而是函数内部仍依赖未被转发的 $colors 映射。
立即学习“前端免费学习笔记（深入）”；
-
with只改名，不重绑定作用域——原函数运行时仍查找它所在模块的变量 - 必须确保被转发模块自身已完整
@use所有依赖，或在with中一并重映射：@forward "color" with ($colors as $colors); - 调试技巧：临时删掉
with，用原始名称测试是否能跑通，确认问题是出在改名还是依赖缺失 -
@forward "mixins" hide responsive-hover;可屏蔽内部调试函数，避免暴露不稳定 API
哪些内容绝对不该放进 @forward 入口文件
入口文件一旦开始写样式规则或变量赋值，模块边界就失效了。这不是风格问题，是编译器机制决定的硬约束。
- 顶层 CSS 规则（如
.reset { margin: 0; }）会被重复编译进每个引用它的文件，体积失控 - 本文件定义的
$tmp: 12px;不会被转发出去，外部永远访问不到 - 带下划线的私有成员（如
$_breakpoint-config）不该出现在@forward列表里——Sass 没强制私有，但这是约定底线 - 未加文档说明的
@mixin（比如没写参数含义、适用场景）不该暴露，否则使用者容易误用内部实现细节
最难的不是写对第一行 @use，而是让每个新增组件都严格遵守命名空间规则、不绕过 @forward 直接引用子模块、不在入口文件里偷偷加一行 $hack: true;——模块边界的松动，往往从一个看似无害的空格或注释开始。
