必须将@import改为@use或@forward，因Dart Sass 1.70.0起彻底禁用@import的隐式作用域注入，变量/混合宏不再自动暴露，需显式命名空间引用且路径须精确。
直接把 node-sass 换成 sass 不够，Dart Sass 对模块化语法是硬性要求——@import 已被标记为 deprecated，必须改用 @use 或 @forward，否则构建会报错或样式失效。
为什么 @import 会突然失效
Dart Sass 从 1.70.0 开始彻底禁用旧式 @import 的隐式变量/混合宏泄漏行为。它不再自动将被导入文件的变量、函数、mixin 注入当前作用域，而是要求显式声明依赖关系。这不是“兼容性开关”能绕过的，是语言规范层面的变更。
常见现象包括：
-
SassError: Undefined variable "$color-primary"—— 即使该变量定义在@import "vars"文件里 -
SassError: Undefined mixin "button-style"——@import "mixins"后仍无法调用 - 构建成功但样式丢失：变量值 fallback 到默认值（如
black），因未正确解析作用域
@use 替换 @import 的实操要点
@use 不是简单替换字符串，它强制模块命名空间和显式引用。迁移时注意以下几点：
立即学习“前端免费学习笔记（深入）”；
- 把
@import "utils/mixins"改成@use "utils/mixins" as utils，之后调用写成@include utils.button-style() - 若需全局变量（如主题色），用
@use "styles/vars" with ($primary: #007bff)覆盖默认值 - 多个文件共用同一模块？统一
@use一次即可，Dart Sass 会自动 dedupe，不用怕重复引入 -
@use必须放在文件顶部，且不能出现在嵌套规则、@media或@if块内
如何处理第三方 SCSS 库（如 Bootstrap、Bulma）
多数主流库已支持 @use，但老版本（如 Bootstrap 4.x）只提供 @import 入口。此时不能硬切，需分两步：
- 确认库是否提供
@use兼容入口：查其package.json中"sass"字段，或看是否有index.scss导出命名空间 - 若无，保留
@import并隔离：新建_legacy-bootstrap.scss，仅在此文件中@import，再在主文件中@use "./legacy-bootstrap" as bs - 避免混用：一个文件里不要同时出现
@use和@import，Dart Sass 会拒绝编译
路径与后缀问题最容易被忽略
Dart Sass 要求路径精确，不补全、不猜测：
-
@use "components/button"会失败，必须写@use "components/button" as button（假设文件是button.scss） - Windows 下路径分隔符
\是转义字符，一律改用/：@use "utils/mixins"，不是@use "utils\mixins" - 别依赖自动后缀补全：Dart Sass 不会尝试加载
mixins.sass或mixins.css，只认.scss或.sass显式后缀（除非用loadPaths配置）
最麻烦的不是语法改写，而是变量作用域收敛后暴露的隐藏耦合——比如两个组件文件都 @use "vars" 却各自覆盖了 $spacing，结果样式冲突。这类问题不会报错，只能靠视觉回归测试抓出来。
