@use能彻底切断变量覆盖，因为它创建独立命名空间而非文本拼接，如dark.$bg与light.$bg互不干扰；而@import会直接覆盖同名变量。
@use为什么能彻底切断变量覆盖
因为@use不是把文件内容“粘贴”进当前作用域，而是创建一个独立命名空间。你写$bg，Sass只查全局；但dark.$bg和light.$bg是两个完全不同的变量，互不影响。而@import本质是文本拼接——后导入的$bg: #fff会直接抹掉前一个$bg: #111，连警告都没有。
@use路径报“No module with the name”怎么办
这不是路径写错，是文件名或结构不合规。Dart Sass 只认以下划线开头的 partial 文件（如_colors.scss），且路径必须精确匹配：
-
@use "colors"✅ —— 对应_colors.scss，不能是colors.scss或colors.css - 相对路径从当前文件算起：
src/components/button.scss里要引入src/scss/_colors.scss，得写@use "../../scss/colors" - 路径含空格或中文 → 直接拒绝解析，不报错也不警告
- 纯 CSS 文件（如
normalize.css）不能直引，需新建_reset-wrapper.scss，里面用@import "node_modules/normalize.css/normalize.css"包一层，再@use "reset-wrapper"
混用@import和@use会导致整个文件降级
只要一个文件里存在任意一行@import，Dart Sass 就会把整份文件（包括所有被它间接引入的依赖）强制切回 legacy 模式：@use失效、命名空间消失、变量回归裸名访问。常见现象：
-
@use "vars" as v后写v.$color-text报Undefined variable - 删掉同一文件里某处残留的
@import "reset"，立刻正常 - 第三方库（如 Bootstrap 4）仍用
@import，若被你的入口文件直接或间接引入，也会拖垮整个模块链
!default在@use下只生效一次
$primary: red !default 在 @import 场景下可被多次“回退赋值”，但在 @use 中，变量值在首次加载时就锁定。后续 @use "theme" with ($primary: blue) 会覆盖，但再 @use "theme" 不会重新触发 !default。
立即学习“前端免费学习笔记（深入）”；
真正容易被忽略的是：命名空间前缀必须和调用方式严格一致——@use "src/typo" as t，就必须写 t.$font-size-base；写成 typo.$font-size-base 或 $font-size-base 都会失败，且错误信息不会提示“你少写了前缀”，只报 Undefined variable。
