直接替换@import为@use会编译失败，因@use是模块系统重构而非语法升级：变量/混入必须加命名空间前缀（如colors.$primary）访问，文件须以下划线开头（_vars.scss），路径须精确匹配且不补扩展名，纯CSS需包装层引入。
直接替换 @import 为 @use 会编译失败，这不是语法微调，而是模块系统重构——变量、函数、@mixin 全部被隔离进命名空间，裸写 $color 或 @include clearfix 必报 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 *会静默覆盖同名变量，不推荐 - 所有成员（变量、函数、
@mixin）调用时必须带前缀，连字符（-）保持原样，不转驼峰
@use路径总报“No module with the name”怎么办
@use 不猜路径、不补扩展名、不搜子目录，只认带下划线前缀的 Sass partial 文件（如 _vars.scss），且路径必须精确匹配文件系统。
- 被导入文件必须以
_开头，写成_vars.scss；写vars.scss就报错No module with the name "vars" - 相对路径从当前文件出发，不是项目根目录：
@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"; - 该包装文件里不能写变量、
@mixin或其它@use，否则可能触发解析失败 - 主文件中写：
@use "normalize-wrapper" as *;（或带命名空间） - 别用
@use "normalize.css"——这不是合法模块名，路径也不存在
@use必须放在文件最顶部，且不能嵌套
@use 只能出现在样式表最前面，且只能在它之前放变量声明（用于配置模块），其他任何规则都会导致编译失败。
- ✅ 正确：
$theme-color: #28a745;+@use "colors" with ($primary: $theme-color); - ❌ 错误：在
.header { ... }或@media块之后写@use，报Invalid CSS after ".header" - ❌ 错误：在
@if、@for或选择器内部使用@use，语法不被允许 - 同一模块多次
@use不重复执行，但@use "x" as a和@use "x" as b被视为两个独立命名空间
最容易被忽略的是：混用 @import 和 @use 会让整条依赖链降级为 legacy 模式，所有命名空间失效；还有，!default 只在首次定义时生效，@use "theme" with ($font-size-base: 16px) 是唯一可控传参方式，后续 @use 不会重新触发回退逻辑。
