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 组件的叠层失效，却不会报错，只在运行时出问题。