直接替换@import为@use会失败，因@use启用严格命名空间隔离，变量如$primary-color须写为colors.$primary-color；文件名须以下划线开头（如_vars.scss），路径须精确匹配，不支持CSS直引，第三方库需适配版本。
直接把 @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 *是解构导入，仅限单个模块使用；多个@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 "" —— 它只解析 Sass 模块语法。
立即学习“前端免费学习笔记（深入）”；
- 新建本地包装文件，命名为
_normalize-wrapper.scss（注意下划线前缀） - 内容只有一行：
@import "node_modules/normalize.css/normalize.css"; - 该包装文件里不能写变量、混入、
@use或其它 Sass 逻辑，否则可能触发解析失败 - 主文件中写：
@use "normalize-wrapper" as *（或带命名空间） - 别写
@use "normalize.css"—— 这是无效路径，也不是合法模块名
第三方库（如 Bootstrap）能直接 @use 吗？
不能一概而论：Bootstrap 5.3+ 支持 @use，但结构已重排；Bootstrap 4.x 或未适配库，@use 会直接报错，无法迁移。
- Bootstrap 5.3+ 示例：
@use "bootstrap/scss/functions" as bs→ 调用bs.str-to-num("12px")，不能写str-to-num("12px") -
!default只在首次定义时生效；传参唯一可控方式是@use "theme" with ($font-size-base: 16px) - 旧写法
@import "bootstrap/scss/functions"直接失效——@use后所有成员必须显式加前缀调用 - Node Sass 已停止维护，
@use和@forward仅支持 Dart Sass（即sassnpm 包）；确认构建链路中sass-loader ≥ 12.0+sass ≥ 1.33.0
最容易被忽略的是：Dart Sass 是唯一支持 @use 和 @forward 的实现，且所有路径、文件名、命名空间都必须精确——少一个下划线、多一个空格、错一层相对路径，就卡住不动。
