必须分阶段迁移：先隔离全局副作用文件，再解耦变量与逻辑层，最后通过@forward收敛；@use须置顶且不能与@import混用顺序错误；旧变量文件需拆为原子tokens与逻辑层，禁用隐式依赖。
直接用 @use 替代旧 @import 不可行——它会立刻报错，因为变量、mixin 全部未定义。必须分阶段迁移，先隔离、再解耦、最后收敛。
如何识别哪些文件还能保留 @import
不是所有 @import 都要立刻改。关键看它是否引入了“全局副作用”：
- 引入
_reset.scss或_base.scss这类带实际 CSS 规则（非仅变量/mixin）的文件，可暂留@import，但必须确保它在所有@use之前 - 引入
_variables.scss或_mixins.scss的@import必须全部替换——否则@use无法访问这些声明，命名空间形同虚设 - 第三方库（如 Bootstrap）若未提供
@use兼容入口，可用@import，但需加注释说明，并单独抽到vendor/目录下，与自研模块物理隔离
怎么让 @use 和旧 @import 共存不冲突
顺序和作用域是唯一可控点。Sass 编译器按行解析，顺序错了就全崩：
-
@use必须放在文件最顶部，不能被@import“打断”；一个文件里混用时，@use在前，@import在后 - 所有
@import引入的变量/函数，必须在@use之前完成定义；否则@use "tokens"会找不到$color-primary - 禁止在
@import文件内部再写@use——Dart Sass 1.70+ 不支持嵌套模块化，会直接编译失败
如何安全地把旧 _variables.scss 拆成 @use 友好结构
别直接重命名加下划线就完事。原 _variables.scss 往往混着颜色、断点、z-index、字体栈，全塞在一个文件里，@use 后反而更难维护：
- 先拆出基础层：
_tokens.scss（只放$color-primary、$spacing-sm等原子值），并确保它不依赖任何其他 partial - 再拆出逻辑层：
_breakpoints.scss（含$grid-breakpoints和@mixin media-breakpoint-up()），它可@use "tokens"，但反过来不行 - 原文件保留为
_legacy-variables.scss，仅用于过渡期@import，新功能一律写进新 partial，且每个新文件顶部加// @use-only注释标记
为什么 @forward 是渐进式迁移的核心粘合剂
你不可能一夜之间让所有组件文件都改写成 @use "tokens" as t。这时 @forward 能帮你维持兼容性：
- 新建
src/styles/_index.scss，里面只写：@forward "tokens"; @forward "breakpoints"; - 旧组件文件仍可
@use "src/styles"，然后用styles.$color-primary—— 它不关心底层是几个文件 - 后续每拆一个新模块（比如
_typography.scss），只需在_index.scss里加一行@forward "typography"，下游无感升级
最难的不是语法转换，而是旧代码里那些隐式依赖：某个 _button.scss 里直接用了 $radius-lg，但它根本没 @import 变量文件——这种“侥幸运行”的代码，在 @use 下第一行就报错。得靠搜索 $[a-z] + 手动补 @use，没法绕开。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
