必须用@use替代@import是硬性要求，因dart sass自2026年8月18日起已对未迁移项目直接报错；直接替换会全报错，因其本质是模块系统重构：变量/混入须加命名空间（如colors.$primary）、文件须以下划线开头（_vars.scss）、路径须精确匹配、纯css需包装、第三方库须适配。
必须用 @use 替代 @import，这不是“推荐做法”，而是硬性要求——Dart Sass 已在 2026 年 8 月 18 日起对未迁移项目直接报错中断编译。
为什么直接把 @import 换成 @use 会全报错？
因为 @use 不是语法替换，而是模块系统重构：它默认关闭全局注入，所有变量、函数、@mixin 都必须通过命名空间显式访问。你写 $primary，Sass 只查全局；但它实际在 colors.$primary 里。
- 默认命名空间 = 文件名（不含
_和.scss），例如@use "src/vars"→ 后续必须写vars.$font-size-base - 可用
as自定义前缀：@use "src/vars" as v→ 调用v.$spacing-md -
as *能解构导入，但仅限单个模块；多个as *会静默覆盖同名变量，失去封装意义 - 旧代码中所有裸调用（如
@include clearfix）必须补上前缀：@include utils.clearfix
@use 总提示 “No module with the name” 怎么办？
@use 不猜路径、不补扩展名、不搜子目录，只认带下划线前缀的 partial 文件（如 _colors.scss），且路径必须与文件系统严格一致。
- 被导入文件必须以
_开头：@use "colors"却只有colors.scss→ 报错；得改名为_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 直接拒绝解析
怎么引入 normalize.css、Bootstrap 这类第三方 CSS 或 Sass 库？
@use 不支持直引 .css 文件，也不兼容未适配的旧版 Sass 库（如 Bootstrap 4）。
- 纯 CSS 文件（如
normalize.css）必须包装：_normalize-wrapper.scss内容仅一行：@import "node_modules/normalize.css/normalize.css";，再@use "normalize-wrapper" - Bootstrap 5.3+ 支持
@use，但路径和结构已变：@use "bootstrap/scss/functions" as bs→ 调用bs.str-to-num("12px") - Bootstrap 4.x 或未声明
@use兼容的库，@use会直接报错，无法迁移；只能保留@import并包裹进独立_legacy-bootstrap.scss，避免污染主模块 - 第三方库若用
!default做配置回退，@use ... with ($var: value)是唯一可控传参方式；多次@use不触发重新赋值
如何组织多个组件文件才不堆满 @use？
@use 不支持逗号分隔多路径（@use "a", "b" 是语法错误），正确做法是下沉聚合逻辑到 _index.scss 入口文件。
- 在组件目录下建
_index.scss，里面逐行写：@use "button"; @use "card"; @use "form"; - 主文件只需
@use "components/index" as comp;，调用时用comp.button.$size-lg等 - 若需暴露某模块全部成员，可在
_index.scss中用@forward "button";，而非重复@use - 注意：
@forward不执行被转发文件的顶层代码（比如@debug），只导出其公开成员
最易被忽略的是：Dart Sass 是目前唯一完整支持 @use 和 @forward 的实现；其他编译器（如 Node Sass）早已停止维护，且根本不识别这些指令。路径写错、文件没加下划线、CSS 没包装——这些不是“警告”，而是编译期硬性失败点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
