@import 已被 dart sass 官方强制弃用，2026 年起新版本将报错中断编译；其本质是无作用域的文本拼接，导致变量静默覆盖，而 @use 通过命名空间和 @forward 实现模块化隔离与可控暴露。
@import 已不是“不推荐”，而是被 Dart Sass 官方强制弃用：2026 年起新版本将直接报错中断编译；不迁移，项目就无法构建。
为什么 @import 会静默覆盖变量却从不报错
@import 本质是编译期文本拼接，不做作用域隔离。后导入的同名变量（如 $spacing、$primary-color）无条件覆盖前面的定义，Sass 编译器既不校验重名，也不记录来源。
- 常见错误现象：
SassError: Undefined variable "$primary"或样式值突变——实际是_theme.scss覆盖了_vars.scss里的同名变量，但 DevTools 只显示最后生效的位置 - 使用场景：Angular 项目中同时引入 UI 库和自定义
_mixins.scss，双方都定义了$elevation-2，结果组件阴影被意外替换 - 根本原因：Chrome 的 CSS 源码映射（source map）只指向最终定义行，你查不到是谁先定义、谁后覆盖
@use 必须加命名空间前缀才能访问变量和 mixin
@use 默认创建私有作用域，所有成员必须显式通过命名空间调用，不再存在“全局泄漏”。
- 基础写法：
@use "src/styles/variables" as v;→ 必须写v.$primary-color，不能直接用$primary-color - 默认命名空间 = 文件名（去掉
_和.scss）：_buttons.scss→ 命名空间为buttons；_utils.index.scss→ 命名空间为utils_index - 容易踩的坑：
@use "mixins" as *;是非法语法（Dart Sass ≥5.0 明确禁止），别试图用它模拟@import行为 - 旧代码里所有裸调用必须补前缀：原
@include clearfix→ 改为@include utils.clearfix；原color: $text-color→ 改为color: variables.$text-color
@use 找不到模块？路径和文件名必须严格匹配
@use 不自动补扩展名、不猜文件名、不搜子目录——它只认带下划线前缀的 partial 文件，且路径必须与文件系统完全一致。
- 被导入文件必须以
_开头：@use "colors"却只有colors.scss→ 报错No module with the name "colors"；必须改名为_colors.scss - 相对路径从当前文件出发，不是项目根目录：
@use "../theme/colors"表示上一级再进theme/colors.scss - 若文件实际在
src/scss/_colors.scss，而你在src/components/button.scss里写@use "colors"会失败；得写@use "../../scss/colors"或配--load-path=src/scss - 路径含空格或中文 → Dart Sass 直接拒绝解析
- 纯 CSS 文件（如
normalize.css）不能直引：@use "normalize.css"无效；需新建_normalize-wrapper.scss，内容仅一行：@import "node_modules/normalize.css/normalize.css";，再@use "normalize-wrapper"
如何组织入口文件避免主样式堆满 @use
@use 不支持逗号分隔多路径（@use "a", "b" 是语法错误），正确做法是下沉聚合逻辑到统一入口文件。
- 新建
_index.scss，里面只写：@forward "variables"; @forward "mixins"; @forward "functions";—— 不写@use，不执行代码，只声明“我对外提供什么” - 组件中改用：
@use "index" as i;→ 调用i.$primary-color、@include i.flex-center() - @forward 支持可控暴露：
@forward "colors" hide $blue-900可防止下游误用未设计好的色值；@forward "utils" as u-会让所有成员加u-前缀，彻底规避命名冲突 - 严禁循环：
A @forward B同时B @forward A→ 编译报Circular @forward
真正难的不是把 @import 替换成 @use，而是要把过去“靠顺序和记忆维护”的变量关系，变成靠命名空间、路径规范和显式转发来约束。漏掉一个前缀、写错一个下划线、少建一个包装层，都会导致编译失败或样式错乱——这些细节，恰恰是模块化落地最真实的成本。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
