Sass 5.0+ 弃用 @import 是因全局作用域、隐式覆盖、重复解析等问题，改用 @use（模块化、命名空间访问）和 @forward（聚合导出）解决；CSS 文件和未升级第三方库仍可用 @import，但需全量替换以消除警告。
为什么 @import 在 Sass 5.0+ 里会报警告
Sass 官方从 v5.0 开始正式弃用 @import，所有使用它的地方都会触发 DEPRECATION WARNING: Using @import with Sass files is deprecated。这不是语法错误，但会影响长期维护——@import 的全局作用域、隐式变量覆盖、重复解析等问题，在大型项目中极易引发意外交互。Sass 推出 @use 和 @forward 就是为了解决这些根本缺陷。
用 @use 替换 @import 的三步实操
@use 强制模块化：每个文件默认私有作用域，变量/函数/mixin 需显式导出，且必须通过命名空间访问。迁移不是简单替换，要同步调整引用方式。
- 把
@import "variables"改成@use "variables"，之后所有$primary-color要写成variables.$primary-color - 如果想省略命名空间，可用
@use "variables" as *（仅限当前文件内无命名冲突时） -
@use必须放在文件最顶部，且同一路径只加载一次（自动去重），不用再手动加!default防重复定义
@forward 怎么替代“聚合导入”场景
很多项目习惯建一个 _index.scss，里面 @import 一堆子模块，再统一 @import "index"。这种模式不能直接用 @use "index" 复用——因为 @use 不会透传子模块内容。正确做法是改用 @forward：
// _index.scss @forward "variables"; @forward "mixins" as mixin-*; @forward "functions" show color-lighten;
这样外部 @use "index" 后，就能通过 index.$spacing-sm、index.mixin-flex-center、index.color-lighten() 访问，且保留了封装性。
容易被忽略的兼容与迁移陷阱
不是所有 @import 都能无脑换。以下情况要特别注意：
-
@import加载 CSS 文件（如@import "normalize.css"）仍可继续用，@use不支持纯 CSS - 第三方库（比如 Bootstrap 4）没迁移到
@use，就别强改；等它发布 v5+ 兼容版，或用@use "bootstrap" with (...)（需其已提供index.scss导出） -
@use不支持动态路径（@use "#{$theme}/vars"），这种逻辑得抽到 JS 构建层处理 - 旧项目混用
@import和@use时，@import仍会污染全局，导致变量意外覆盖——必须全量替换完才能彻底消除警告
真正的难点不在语法转换，而在于理清依赖层级和命名空间边界。一个没导出的 $z-index-modal，可能让整个 UI 组件的叠层失效，却不会报错，只在运行时出问题。
