直接替换@import为@use会编译失败，因模块系统彻底重构：变量/混入需加命名空间（如colors.$primary-color），路径须精确匹配下划线开头的partial文件（如_variables.scss），不补扩展名、不搜子目录；混用@import会导致整个依赖链降级为legacy模式。
直接替换 @import 为 @use 会编译失败，这不是语法问题，而是模块系统彻底重构——变量、混入、路径规则、文件命名全部变了，不调整就跑不通。
为什么 @use 后所有变量和混入都报 “Undefined variable”
因为 @use 默认不把任何东西注入全局作用域。你写 $primary-color，Sass 只查全局；但它实际在 colors.$primary-color 里。
- 默认命名空间 = 文件名（不含
_和.scss），比如@use "src/vars"→ 必须用vars.$font-size-base -
@use "src/vars" as v→ 后续全得写v.$spacing-md，不能混用vars.$xxx - 连字符变量如
$text-sm，不能写成$textSm—— Sass 不做驼峰转换 -
@use "vars" as *能解构导入，但只限单个模块；多个as *会静默覆盖同名成员
为什么 @use 总报 “No module with the name”
@use 不猜路径、不补扩展名、不搜子目录，只认带下划线的 partial 文件（如 _variables.scss），且路径必须精确匹配文件系统。
- 被导入文件必须以
_开头：_variables.scss✅，variables.scss❌ -
@use "variables"✅（自动匹配_variables.scss）；@use "_variables"❌；@use "variables.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 直接拒绝解析
怎么引入 normalize.css 这类纯 CSS 文件
@use 不支持直引 .css 文件，遇到 /* 开头会立刻报错 Invalid CSS after ""。
立即学习“前端免费学习笔记（深入）”；
- 新建一个包装文件，命名为
_normalize-wrapper.scss（必须带下划线） - 内容只有一行：
@import "node_modules/normalize.css/normalize.css"; - 该包装文件里不能写变量、混入、
@use或其它 Sass 逻辑，否则可能触发解析失败 - 主文件中写：
@use "normalize-wrapper"或@use "normalize-wrapper" as * - 别写
@use "normalize.css"—— 这既不是合法模块名，也不符合 partial 命名规则
@use 和 @import 混用会导致整个依赖链崩溃
只要存在任意一处 @import（哪怕在第三方库或配置里），整个文件及所有依赖链立刻降级为 legacy 模式：@use 失效、命名空间消失、v.$color-text 报错。
- 全局搜索项目中所有
@import，包括node_modules中未升级的库（如 Bootstrap - 检查构建配置（如
vite.config.ts的sassOptions.additionalData）是否偷偷注入了@import - 用
sass --trace src/styles/main.scss定位具体哪一行触发降级 - 入口文件（如
index.scss）必须只写@use，不写任何@import，也不直接输出 CSS 规则
最易被忽略的是：第三方库若仍用 @import，你无法靠 @forward 包装它——得等库升级，或改用 <link rel="stylesheet"> 单独加载。
