不能全局搜索替换@import为@use，因为@use默认不注入变量到当前作用域，所有成员必须加命名空间前缀（如vars.$color-primary），且@use与@import混用会导致编译失败，迁移需按依赖层级重构模块边界和显式引用关系。
直接替换 @import 为 @use 会报错、变量访问失败、样式重复或缺失——这不是字符串查找替换，而是模块系统升级，必须重理依赖流向和作用域边界。
为什么不能全局搜索替换 @import → @use
因为 @use 默认不注入变量到当前作用域，所有成员必须加命名空间前缀；而 @import 是全局平铺。你写 @use "vars" 后再用 $color-primary，Sass 会报 Undefined variable——它实际叫 vars.$color-primary。另外，@use 不允许和 @import 混用在同一文件，一混就编译失败。
-
@import "reset"→@use "reset"后，所有$reset-margin必须改成reset.$reset-margin - 原
@import "_mixins"中的@mixin flex-center，现在得写@include mixins.flex-center()（假设文件名是_mixins.scss） - 多个文件都
@use "utils"，不会重复执行，但若其中一个写了@use "utils" as u1，另一个写@use "utils" as u2，它们的变量完全隔离，互不影响
如何安全迁移：从底层工具模块开始
迁移顺序错了，上层组件立刻报错。必须按“变量/函数/混入 → 组件 → 页面”分层推进，先改最基础的 _variables.scss、_functions.scss 这类纯逻辑文件。
- 先确认所有被
@use的文件都以_开头（如_variables.scss），否则No module with the name报错 - 入口文件（如
main.scss）里，把@import "variables"改成@use "variables" as v，然后通篇搜$color-替换为v.$color- - 组件文件（如
_button.scss）里如果也用了$spacing-sm，不能靠“父文件已导入”来隐式获取，必须自己@use "variables" as v - 禁用通配导入（如
@import "components/*"），它不保证顺序，且@use不支持通配
@forward 是怎么解决“统一入口”需求的
老项目常有一个 all.scss 把所有 partial @import 一遍，迁移到 @use 后不能让每个组件都单独 @use 十几个文件——要用 @forward 建立收敛入口。
立即学习“前端免费学习笔记（深入）”；
- 新建
index.scss，里面只写：@forward "variables" as var-*、@forward "mixins" as m-*，不写@use - 组件中改用
@use "index" as i，调用i.var-primary、@include i.m-flex-center -
@forward "colors" hide $blue-900可防止下游误用未设计好的深色值 - 不要在同一个文件里先
@forward "utils"再@use "utils"，Sass 会警告重复解析
第三方包和构建工具的兼容性坑
不是所有 Sass 包都支持 @use，尤其 Bootstrap 4 或旧版 Bulma，强行改会编译失败；同时构建工具若没启用 modern API，@use 语法本身就不识别。
- 检查
npm list sass，版本必须 ≥1.33.0；低于此版本，@use直接报Unknown rule '@use' - Webpack 用户确认
sass-loader≥ v14，且implementation: require('sass')指向新版 Dart Sass - Bootstrap 5 可用
@use "bootstrap" with ($enable-grid-classes: false)，但 Bootstrap 4 不支持with，只能降级 Sass 版本或加兼容 wrapper - Vite 默认支持
@use，但不会自动转换路径别名（如@/styles），仍需用相对路径或配置css.preprocessorOptions.sass.additionalData
最易被忽略的是：命名空间不是装饰，是作用域契约。一旦用了 @use，$z-index-modal 就不再是全局变量，而是某个模块的私有成员——谁需要它，谁就得显式声明依赖，没人能偷偷覆盖它。
