必须立即迁移到@use/@forward，因dart sass 3.0.0已发布，@import将直接报错中断构建；兼容模式仅是最后缓冲期，其文本粘贴机制导致全局污染、静默覆盖、重复解析及路径不规范等问题。
直接把所有 @import 换成 @use 或 @forward，不是“建议”，而是编译器已亮红灯——Dart Sass 3.0.0 已发布，CI 或 npm install 拉到新版后，@import 会直接报错中断构建。
为什么 @import 还能编译但必须立刻改？
你当前用的是 Dart Sass 2.x 的兼容模式，它把 @import 当作文本粘贴：不校验、不隔离、不缓存。这导致：
- 两个文件都定义
$spacing，后@import的无条件覆盖前者，DevTools 只显示最后位置，查不到来源 -
@import "mixins"在 6 个组件里各写一次，Sass 就解析 6 次该文件，热更新变慢、CSS 体积膨胀 - Angular CLI / Vite 升级 minor 版本（如 sass-loader 从 4.1.0 → 4.2.0）可能默认启用严格模式，警告秒变
Error: Invalid CSS after "@import"
@use 怎么写才不报错？
@use 是硬性语法，错位、路径多写扩展名或下划线都会让编译器拒绝执行：
- 必须是 SCSS 文件中第一个非注释、非空行的语句，不能放在
@if、@media或选择器内部 - 路径不带扩展名和下划线：
@use "src/styles/variables"✅，@use "src/styles/_variables.scss"❌ - 省略
as时，默认命名空间为文件名：@use "variables"→ 必须用variables.$primary-color -
@use "utils" as *是非法语法（Sass ≥5.0 明确禁止），会导致命名冲突（如colors.$radius和theme.$radius同时存在时编译失败）
@forward 不是高级 @import，而是接口封装动作
@forward 出现在统一入口文件（如 _index.scss）中，它不加载内容，只声明“我能透出什么”：
- 基础封装：
@forward "variables"; @forward "mixins";，下游只需@use "index" as i;→i.$primary-color - 可控暴露：
@forward "zindex" hide $z-index-drawer;，防止下游误改底层变量 - 重命名转发：
@forward "utils" as u-*;，把所有成员加u-前缀，彻底规避命名冲突 - 严禁循环：
A @forward B且B @forward A→ 编译报Circular @forward
真正容易被忽略的点：第三方库若仍用 @import（比如未升级的 Bootstrap 4），你无法用 @forward 包装它——得等库更新，或自己 fork 后手动改写；漏掉某个 @use 路径没加命名空间，或 @forward 忘了 show 关键成员，样式会静默失效，且毫无提示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
