混用@use和@import会导致变量失效，因为Sass编译器一旦检测到任一@import，整文件即降级为legacy模式，所有@use被忽略，命名空间失效，变量必须全局访问；删掉残留@import即可恢复模块化行为。
为什么混用@use和@import会导致变量突然失效
因为 Sass 编译器一旦在文件中看到任何 @import，就会整份文件降级为旧模式（legacy mode），所有后续 @use 都被忽略或静默失效——变量、@mixin、@function 全部无法按模块化方式访问。
常见错误现象：@use "vars" as v; 后写 v.$color-text 报错 Undefined variable，但删掉同一文件里某处残留的 @import "reset" 就立刻正常。
- 整个文件及其所有
@import依赖链都会退化为扁平作用域，@use的命名空间机制完全不生效 - 第三方库（如
bootstrap/scss/functions）若仍用@import引入，也会触发降级，导致你自己的@use模块无法互通 - Vue / Angular 项目里
main.scss中哪怕只有一行@import，也会让整个样式系统失去模块隔离能力
如何检查并清理残留的@import
不是找“哪些文件写了 @import”，而是要确认“哪些文件被 @import 过”——因为被 @import 的文件即使本身只写 @use，也会被拖进旧模式。
- 全局搜索项目中所有
@import（包括带引号/不带引号、单双引号、路径含不含.scss或下划线前缀） - 重点排查：构建配置里的
sassOptions（如 Vue CLI 的vue.config.js）、node_modules中未升级的第三方库（如 Bootstrap < 5.3）、以及团队成员手写的工具类_helpers.scss - 用
sass --version确认是 Dart Sass ≥ 1.23.0；旧版 LibSass 不支持@use，会直接报错而非警告
@use迁移时最危险的三个变量陷阱
@use 不是语法替换，而是语义重载。变量行为变化最隐蔽，容易在上线后才发现样式错乱。
立即学习“前端免费学习笔记（深入）”；
-
!default不再“回退赋值”：@use "theme" with ($primary-color: #007bff)之后，其他地方再@use "theme"不会重新计算默认值——值在首次@use时就锁死了 - 路径别名必须严格一致：
@use "_vars"和@use "vars"在 Sass 看来是两个不同模块，变量互不可见；下划线前缀可省略，但不能混用 - 第三方函数必须加前缀：
@use "sass:math"后，math.div(10px, 2)才合法，直接写div(10px, 2)会报Function "div" is not defined
第三方库不支持@use怎么办
不是所有库都适配了 @use。强行替换路径只会编译失败，必须分情况处理。
- Bootstrap 5.3+：支持原生
@use，但必须按官方结构来——先@use "bootstrap" with (...)，再@use "bootstrap/scss/functions" as bs-fn；低于 5.3 的版本保留@import，并确保它不和你的@use文件同属一个编译入口 - 未适配的私有库或老工具包：用
@forward封装一层，例如新建_legacy.scss仅含@import "old-utils"，然后在主文件中@use "legacy"，把污染控制在最小范围 - 绝对不要用
@use "xxx" as *解构导入来“绕过”命名空间——这等于主动放弃模块隔离，和@import没区别
真正卡住迁移的，往往不是语法不会写，而是某个被遗忘的 @import 在 node_modules 深层路径里悄悄触发了降级，或者 !default 变量在多处 @use 中被误以为还能动态覆盖。模块化不是加个前缀就完事，是整套作用域契约的重建。
