直接替换@import为@use必然失败，因它是模块系统升级而非语法调整：必须同步处理命名空间（变量/混入需加前缀如colors.$primary-color）、文件规范（须以下划线开头如_vars.scss）、路径写法（精确匹配、不补扩展名、不搜子目录），否则90%成员报Undefined错误。
直接替换 @import 为 @use 必然失败——这不是语法调整，而是模块系统升级，必须同步处理命名空间、文件规范和路径写法，否则 90% 的变量和混入会报 Undefined variable 或 Undefined mixin。
为什么所有变量/混入访问都报错？
因为 @use 默认启用严格命名空间隔离：它不把内容注入全局作用域，而是挂载到一个命名空间下。你写 $primary-color，Sass 去找全局变量；但它实际在 colors.$primary-color 里。
- 默认命名空间 = 文件名（不含
_和.scss），例如@use "src/vars"→ 必须用vars.$font-size-base - 可用
as自定义前缀：@use "src/vars" as v→ 后续全写v.$spacing-md -
as *是解构导入，仅限单个模块使用；多个@use ... as *会静默覆盖同名变量，不推荐 - 旧代码里所有裸变量（如
$font-size-base）和裸混入（如@include clearfix）都得补上前缀
@use 总提示 “No module with the name” 怎么办？
@use 不猜路径、不补扩展名、不搜子目录，只认带下划线前缀的 Sass partial 文件（如 _colors.scss），且路径必须精确匹配文件系统。
- 被导入文件必须以
_开头，写成_vars.scss；写vars.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 不支持直引 .css 文件，会报 Invalid CSS after ""。必须新建一个本地包装层。
立即学习“前端免费学习笔记（深入）”；
- 新建
_normalize-wrapper.scss（注意下划线前缀），内容只有一行：@import "node_modules/normalize.css/normalize.css"; - 该包装文件里不能写变量、混入或其它
@use，否则可能触发解析失败 - 主文件中写：
@use "normalize-wrapper"（可加as *或自定义前缀） - 别用
@use "normalize.css"——这不是合法模块名，也不是有效路径
如何组织多个模块避免主文件堆满 @use？
@use 不支持逗号分隔多路径（@use "a", "b" 是语法错误）。正确做法是下沉聚合逻辑到 _index.scss 入口文件。
- 在组件目录下建
_index.scss，里面逐行写：@use "button"; @use "card"; @use "utils"; - 再用
@forward控制透出哪些成员：@forward "button" show button-primary, button-secondary; - 上层只需
@use "components"，就能通过components.button-primary()调用 - 第三方库未适配
@use（如 Bootstrap 4.x）时，无法迁移；5.3+ 支持但结构重排，必须按新路径引用并加前缀
真正难的不是写对第一个 @use，而是让整个依赖链路里没有一处残留 @import——哪怕只有一处，整个模块边界就失效，tree-shaking 失灵，CSS 体积失控。
