dart sass 3.0.0 将彻底废弃 @import，当前兼容模式是最后缓冲期；必须立即迁移到 @use/@forward，因其解决作用域污染、重复解析、路径规范及模块封装等核心问题，且构建工具升级可能即时触发编译失败。
警告不是提醒你“可以改”，而是告诉你：当前构建环境已运行在兼容模式的最后缓冲期，Dart Sass 3.0.0 一旦被 CI 或本地依赖自动拉取，@import 就会直接报错中断编译。
为什么@import现在还“能用”但必须立刻动？
因为你在用 Dart Sass 1.x 或 2.x 的兼容模式——它把每个 @import 当作文本粘贴，无条件塞进全局作用域。这导致：
- 两个文件都定义了
$spacing，后@import的覆盖前一个，调试时根本看不出谁改的 -
@import "mixins"在 8 个组件里各写一次，编译器就解析 8 次该文件，热更新变慢、CSS 体积膨胀 - Angular CLI / Vite / Webpack 的 Sass loader 若升级 minor 版本（比如从 2.1.0 到 2.2.0），可能默认启用严格模式，警告秒变错误
@use 必须写在文件最顶部，且路径不带扩展名和下划线
这是硬性语法要求，错位或路径写错会直接编译失败，不是警告。
-
@use必须是 SCSS 文件中第一个非注释、非空行的语句，不能放在@if、@media或选择器内部 - 路径写
@use "src/styles/variables"，不是@use "src/styles/_variables.scss"—— Sass 自动匹配_variables.scss或variables.scss - 别名用
as *可模拟旧全局行为（仅限迁移过渡期），例如：@use "variables" as *;，之后仍可直接写$primary-color - 但生产环境推荐显式命名空间，如
@use "variables" as v;，然后用v.$primary-color
@forward 是封装公共入口的核心手段，不是可选项
大型项目不可能让每个组件都 @use 十几个基础文件。@forward 用来建统一出口，比如创建 _index.scss：
@forward "variables"; @forward "mixins"; @forward "functions";
然后其他文件只需：
@use "index" as i;
.button { color: i.$primary-color; }
-
@forward不会立即引入内容，只声明“我可以透出这些”，真正加载发生在@use时 - 支持
as重命名、hide/show控制导出项，避免把内部实现细节暴露出去 - 第三方库若尚未迁移到
@use，你无法@forward它们的@import文件——得等库更新，或自己 fork 后改写
Vite / Angular / Webpack 中的 additionalData 需同步改写
很多人在构建配置里用 additionalData 注入全局变量，比如：
css: {
preprocessorOptions: {
scss: {
additionalData: `@import "@/styles/vars";`
}
}
}
这行必须改成：
additionalData: `@use "@/styles/vars" as *;`
- 否则所有组件文件仍会因缺失变量而报
Undefined variable - Webpack 的
sass-loader配置同理，additionalData里的@import全部失效 - Angular CLI 默认用 Dart Sass，v17+ 已强制要求
@use，旧styles.scss入口文件也得改
最容易被忽略的是嵌套 @import：某个 _layout.scss 里又 @import "_grid.scss"，这种隐藏调用不会出现在主文件中，但一样会触发警告甚至失败。迁移时必须递归检查整个 src/ 下所有 .scss 文件，不能只扫入口。
