@import必须替换为@use，因其全局污染、静默覆盖、重复解析且2026年起Dart Sass将直接报错；@use强制命名空间隔离、路径精确、作用域私有，调试定位精准。
@import 已被 Dart Sass 官方弃用，迁移不是“可选优化”，而是必须做的兼容性动作——否则 2026 年起新版本 Dart Sass 将直接报错中断编译。
为什么 @import 必须替换为 @use
旧版 @import 是全局作用域导入：所有变量、函数、mixin 全部泄漏到当前文件，不同模块间极易冲突（比如两个 _button.scss 都定义了 $border-radius，后导入的覆盖前一个，且无提示）。@use 则强制封装，每个模块默认私有，显式暴露才可用，调试时也能精准定位来源。
常见错误现象：SassError: Undefined variable "$primary" 或 Function "rem" is not available —— 往往是 @import 顺序错乱或依赖未显式引入导致。
-
@import允许重复导入同一文件，但实际只生效一次，行为不可控 -
@use同一模块在单个文件中多次@use仅加载一次，且会报错提醒命名冲突 -
@use要求路径必须精确（不自动补_或.scss），而@import会宽松匹配
@use 的基本写法与路径规则
路径必须写全名（含下划线和扩展名），不能省略。Dart Sass 不再自动补 _ 前缀或 .scss 后缀——这是最常踩的坑。
立即学习“前端免费学习笔记（深入）”；
例如原写法：
@import "variables";
必须改为：
@use "./variables" as *;
或更推荐的命名空间写法：
@use "./variables" as vars;
之后通过 vars.$primary 访问变量，vars.lighten-color() 调用函数。
- 路径是相对当前文件的，不是相对于项目根目录
-
as *表示将该模块内容提升到全局作用域（不推荐，仅用于快速过渡） - 若模块内用
@forward暴露了内容，@use后仍需通过命名空间访问
Bootstrap 等第三方库的迁移要点
Bootstrap 5.3+ 已完全转向 @use，其内部 bootstrap/scss/bootstrap 不再接受 @import 方式调用。直接替换会失败。
正确顺序必须是：
$primary: #007bff;<br>@use "../node_modules/bootstrap/scss/functions";<br>@use "../node_modules/bootstrap/scss/variables";<br>@use "../node_modules/bootstrap/scss/mixins";<br>@use "../node_modules/bootstrap/scss/root";<br>@use "../node_modules/bootstrap/scss/reboot";<br>// ……其余按依赖顺序逐个 @use
注意：@use 必须在任何变量覆盖之前声明——因为 Bootstrap 的 variables 文件本身会读取你提前定义的 $primary；但如果你先 @use "variables"，再改 $primary，就晚了。
- 不要用
~别名路径（如@use "~bootstrap/scss/functions"），sass-loader 解析不稳定，容易 404 - Webpack 中确保
sass-loader版本 ≥ 13.3.0，否则不支持新版模块语法 - Bootstrap 的
@forward机制把子模块聚合进主入口，但你仍需手动@use所有依赖项，不能只@use "bootstrap/scss/bootstrap"
如何处理旧项目里嵌套的 @import 和部分文件
旧项目常有类似结构：@import "components/_button"，其中 _button.scss 内又 @import "_mixins"。这种链式导入在 @use 下必须拆解为显式依赖声明。
迁移步骤：
- 把所有
_xxx.scss文件里的@import全部删掉 - 在主文件（如
main.scss）中，对每个被依赖的模块单独@use - 如果某个局部文件（如
_mixins.scss）只提供 mixin，就只@use它，不@forward - 若需复用一组逻辑（如所有组件样式），新建一个
components/index.scss，用@forward "_button"、@forward "_card"汇总，再在主文件@use "components"
容易忽略的一点：旧版 @import 允许在选择器内部使用（如 .header { @import "header"; }），这在 @use 下完全非法——所有 @use 必须位于文件顶部，且不能嵌套。
