必须立即迁移到@use/@forward，因dart sass 3.0.0已移除@import；当前警告是兼容模式最后缓冲期，ci或依赖升级将致编译失败，且@import导致全局污染、静默覆盖、重复解析。
你现在看到的 @import 警告，不是“建议你改”，而是 Dart Sass 已经在编译器层面亮起红灯——Dart Sass 3.0.0 已移除 @import，当前只是兼容模式下的最后缓冲期。一旦 CI 或本地依赖自动升级到 3.x，所有 @import 行会直接报错中断构建。
为什么 @import 还能编译但必须立刻动
你仍在用 Dart Sass 1.x 或 2.x 的兼容模式，它把每个 @import 当作文本粘贴进当前文件，无条件注入全局作用域。这导致：
- 两个
_theme.scss和_vars.scss都定义了$spacing，后@import的会静默覆盖前一个，DevTools 里查不到来源 -
@import "mixins"在 6 个组件里各写一次，Sass 就解析 6 次该文件，热更新变慢、CSS 体积膨胀 - Angular CLI / Vite 的 Sass loader 升级 minor 版本（如
sass-loader@4.1.0 → 4.2.0）可能默认启用严格模式，警告秒变Error: Invalid CSS after "@import"
@use 必须怎么写才不报错
@use 是硬性语法：必须是 SCSS 文件中第一个非注释、非空行的语句，不能嵌套在 @if、@media 或选择器内部；路径不带扩展名和下划线，Sass 自动匹配 _xxx.scss 或 xxx.scss：
- 正确：
@use "src/styles/variables" as v;→ 访问变量必须写v.$primary-color - 省略
as时，默认命名空间为文件名：@use "variables";→ 用variables.$primary-color - 禁止
@use "utils" as *;：Sass 5.0+ 明确禁止通配符导入，且会引发命名冲突（如colors.$radius和theme.$radius同时存在时编译失败） - 只提供函数的文件（如
_math.scss）必须用@use，否则@import会把空规则也输出成无效 CSS
@forward 不是快捷方式，是接口封装动作
@forward 出现在统一入口文件（如 _index.scss 或 design-tokens.scss）中，它不执行加载，只声明“我能透出什么”。常见误用是把它当 @import 的替代品直接写在组件里——这是错的。
- 基础用法：
@forward "variables"; @forward "mixins";，然后其他文件只需@use "index" as i;→i.$primary-color - 可控暴露：
@forward "mixins" hide responsive-hover;，下游调用mixins.responsive-hover会直接报错 - 重命名转发：
@forward "utils" as u-*;，所有成员加u-前缀，避免与业务变量撞名 - 严禁循环：
A @forward B且B @forward A→ 编译报Circular @forward
Angular/Vite/Webpack 中容易被忽略的配置点
很多人在构建配置里用 additionalData 注入全局变量（如 @import "src/styles/variables";），这类配置必须同步改写，否则迁移后变量失效：
- Angular CLI：修改
angular.json中的"styles"数组，把原styles.scss里的@import全部替换成@use，并确保它仍是唯一入口 - Vite：若用了
css.preprocessorOptions.sass.additionalData，里面不能含@import，应改用@use "path/to/vars" as v;并显式拼接 - Webpack + sass-loader：检查
options.additionalData，同理替换；同时确认sass-loader版本 ≥ 4.0.0，旧版不支持@use - 第三方库未迁移？你无法
@forward它们的@import文件——只能等库更新，或 fork 后手动改写其入口_index.scss
最常被跳过的一步是：没清理 @import 后残留的全局引用。比如把 @import "variables"; 改成 @use "variables" as v;，却忘了把后面所有 $primary-color 改成 v.$primary-color —— 这类遗漏不会报错，但变量取值为空，样式就丢了。
