不能直接替换@import为@use，因@use启用严格命名空间隔离：变量/混入必须显式通过文件名前缀访问（如colors.$primary-color），不再注入全局；路径须精确匹配下划线开头的partial文件，不补扩展名、不搜子目录；纯CSS需包装后引入，且第三方库须已适配@use。
不能直接把 @import 替换成 @use，否则 90% 的变量、混入、函数都会报 Undefined variable 或 Undefined mixin 错误——这不是语法替换问题，而是模块系统重构。
为什么 @use 后所有变量都访问不到？
因为 @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 *是解构导入，仅限单个模块使用；多个as *会静默覆盖同名变量，不推荐 - 文件必须是下划线开头的 partial（如
_vars.scss），写@use "vars"却只有vars.scss，会报错No module with the name "vars"
@use 路径总报 “No module with the name” 怎么办？
@use 不猜路径、不补扩展名、不搜子目录，路径必须精确匹配文件系统中带下划线的 Sass partial 文件。
- 相对路径从当前文件出发，不是项目根目录：
@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 直接拒绝解析
- 不能
@use "normalize.css"：纯 CSS 文件不支持，必须新建_normalize-wrapper.scss，里面用@import "node_modules/normalize.css/normalize.css"包一层，再@use "normalize-wrapper"
如何引入只导出函数/混入的第三方库（比如 Bootstrap）？
旧写法 @import "bootstrap/scss/functions" 直接失效——@use 后所有成员必须显式加前缀调用，且 !default 不再回退赋值。
立即学习“前端免费学习笔记（深入）”；
- Bootstrap 5.3+ 支持
@use，但结构已重排：@use "bootstrap/scss/functions" as bs→ 调用bs.str-to-num("12px")，不能写str-to-num("12px") - Bootstrap 4.x 或未适配库，
@use会直接报错，无法迁移 -
!default只在首次定义时生效；@use "theme" with ($font-size-base: 16px)是唯一可控传参方式，后续@use不会重新触发回退逻辑 - 循环依赖（A
@usesB 且 B@usesA）会直接报错Module cycle detected.，而@import会静默忽略，结果不可靠
真正容易被忽略的点是：命名空间不是“可选优化”，而是强制前提；路径不是“差不多就行”，而是字节级精确；第三方库不是“换个关键字就行”，而是得先确认是否已适配。一旦漏掉其中任意一条，编译就停在第一行错误上。
