Dart Sass 已彻底移除 @import，强制使用 @use；变量需显式命名空间访问（如 v.$primary-color）；被导入文件必须以下划线开头（如 _variables.scss）；混用 @import 会导致整条依赖链降级为 legacy 模式。
@import 已被 Dart Sass 彻底移除，不是“废弃”，而是编译器直接拒绝识别——写一行就报错 Invalid CSS after "@import"。重构必须同步改三件事：文件命名、导入路径、变量访问方式，缺一不可。
为什么所有变量突然变成 Undefined variable
@use 不会把 $primary-color、$spacing-md 自动扔进全局作用域，它强制你显式声明来源。你写 $primary-color，Sass 只查全局；但它实际在 colors.$primary-color 里。
- @use "src/variables" as v → 必须写
v.$primary-color，不能省略v. - 不写
as时，默认前缀是文件名（不含_和.scss）：@use "variables" → 用variables.$primary-color -
@use "variables" as *是解构导入，仅限单个模块；多个as *会静默覆盖同名变量，不推荐 - 连字符变量名（如
$text-sm）不能写成$textSm，Sass 不做自动转换
@use 总报 “No module with the name” 怎么定位
这不是路径写错，是文件系统不合规。Dart Sass 对路径和命名零容忍，不猜、不补、不搜。
- 被导入文件必须以下划线开头：
_variables.scss✅，variables.scss❌ - @use "variables" ✅ 自动匹配
_variables.scss；@use "_variables" ❌ 报错 - @use "variables.scss" ❌ 不自动补扩展名，也不认纯 CSS 文件
- 相对路径从当前文件算起：若你在
src/components/button.scss里引入src/scss/_colors.scss，得写@use "../../scss/colors" - 路径含空格或中文 → Sass 直接跳过解析，不报错也不警告
怎么安全引入 normalize.css 或 Bootstrap 这类第三方库
@use 无法直读 .css 文件，也不能兼容仍用 @import 的旧版库。必须做一层包装或确认适配版本。
立即学习“前端免费学习笔记（深入）”；
- 新建
_normalize-wrapper.scss（注意下划线），内容只有一行：@import "node_modules/normalize.css/normalize.css"; - 该包装文件里不能写任何 Sass 逻辑（无变量、无
@use、无@mixin），否则可能触发解析失败 - 主文件中写：
@use "normalize-wrapper"或@use "normalize-wrapper" as * - Bootstrap 5.3+ 支持
@use，结构已重排：@use "bootstrap/scss/functions" as bs→ 调用bs.str-to-num("12px") - Bootstrap 4.x 或未升级库，
@use会直接报错，无法绕过，只能等官方迁移或自行 fork 改写
混用 @import 和 @use 会导致整个项目降级
只要任意一个被引用的文件里存在一行 @import，Dart Sass 就立刻把整条依赖链切回 legacy 模式：@use 失效、命名空间消失、v.$color-text 全部报错。
- 错误常藏在第三方库或构建配置里：比如
node_modules/bootstrap/scss/_reboot.scss里有@import，你哪怕只@use "bootstrap"，也会崩 - 检查方式：全局搜索项目中所有
@import（含单引号、双引号、带路径、带后缀） - Vite / Webpack 用户需确认
sassOptions.additionalData是否偷偷注入了@import - 入口文件（如
index.scss）必须只写@use，且所有分量文件（_button.scss等）不输出 CSS 规则，只导出@mixin或占位符
真正难的不是语法，而是过去靠顺序和记忆维护的变量关系，现在必须靠命名空间显式表达。一旦漏掉一个 v. 前缀，或路径里多一个空格，编译就断——这种“严格”不是限制，是提前暴露设计漏洞。
