Dart Sass 自1.70版起将@import标记为弃用警告，1.80.0起强制输出警告，1.85+在--fatal-warnings下直接中断构建；Angular CLI 17+默认启用strictSassImports报错，node-sass已EOL且不支持@use；@import因无模块隔离导致变量覆盖、热更新慢、体积膨胀等缺陷，@use要求路径无扩展名、变量加命名空间、禁用通配符，迁移遗漏前缀将静默失效。
不是“升级后才出现”，而是 Dart Sass 从 1.80.0 起就强制输出警告，且当前（2026 年）所有主流构建工具（Vite、Angular CLI 17+、Webpack + sass-loader@^13）默认启用严格模式——@import 已进入编译器级淘汰流程，警告即失效前哨。
为什么警告不是“可忽略的提示”
@import 的机制本身已被认定为缺陷：它在编译期做无隔离文本拼接，不建模块边界。Dart Sass 自 1.70 开始标记为 DEPRECATION WARNING；升级到 1.85+ 后，若项目启用 --fatal-warnings（CI/CD 常见配置），会直接中断构建。
- 你看到的警告，是 Dart Sass 在兼容模式下“硬扛”的最后缓冲期，不是建议，是倒计时
- Angular CLI 17+ 默认开启
strictSassImports: true，@import直接报错而非警告 -
node-sass已 EOL（2023 年 10 月终止维护），它根本不支持@use语法，连解析都失败
@import 导致的典型编译异常现象
警告背后常伴随静默错误，调试时难以定位：
-
Undefined variable "$color-primary"：实际是@import 'vars'成功了，但后续某个@import 'theme'覆盖了同名变量，DevTools 只显示最后定义位置，查不到源头 - 热更新极慢：改一个
_mixins.scss，因被 6 个组件重复@import，触发整站 CSS 重编译 - 构建体积膨胀：同一
@mixin被多次解析、多次输出，CSS 中出现重复规则 - 路径报错：
Invalid CSS after "@import"——常见于升级sass到1.78.0+后，sass-loader默认启用严格解析
@use 不是字符串替换，而是模块边界重建
迁移到 @use 不是改关键字，是重构作用域逻辑：
立即学习“前端免费学习笔记（深入）”；
-
@use必须是 SCSS 文件中第一个非注释、非空行，嵌套在@if或选择器内直接报错 - 路径不能带扩展名或下划线：
@use "src/styles/variables"✅，@use "src/styles/_variables.scss"❌ - 变量必须加命名空间访问：
$text-color→variables.$text-color，漏写前缀即Undefined variable -
@use "utils" as *在 Sass ≥5.0 是非法语法，禁用通配符导入，防止命名冲突 - 第三方库未适配
@use（如旧版 Bootstrap 4）无法包装，只能保留@import或 fork 后手动改写
最容易被忽略的一点：迁移时漏掉某处变量引用的命名空间前缀，样式会静默失效，编译器不报错也不提示——它只当你没定义这个变量。
