dart sass 2.0 彻底移除 @import 语法，编译直接失败；强制使用 @use/@forward 模块系统，要求精确路径、严格命名，并用 math.div() 替代除法运算。
Dart Sass 2.0 不是“弃用 @import”，而是彻底移除了它——写 @import 就会编译失败，没有警告，不兼容回退。
为什么 @import 在 Dart Sass 2.0+ 中直接报错？
因为 Dart Sass 已完全切换到模块系统（@use/@forward），@import 被语言规范标记为废弃项，且在 1.80.0 起启用弃用警告，2.0+ 直接删除解析逻辑。这不是配置开关能关掉的，是语法层移除。
- 错误现象：
Error: Invalid CSS after "@import"或No module with the name "xxx"（即使路径没错） - 常见误判：以为只是“老写法不推荐”，实际是语法已不存在，连 parser 都不认识
@import关键字 - 根本原因：Dart Sass 团队把模块加载、作用域控制、依赖图构建全交给
@use，@import的文本拼接模型与这套设计完全冲突
@use 路径和命名规则必须严格匹配文件系统
@use 不是“智能导入”，它按精确路径查找 partial 文件（即以 _ 开头、扩展名为 .scss 或 .sass 的文件），不自动补扩展名、不忽略下划线、不支持纯 CSS 文件直引。
- 正确写法：
@use "variables"→ 自动匹配_variables.scss - 错误写法：
@use "_variables"、@use "variables.scss"、@use "normalize.css"→ 全部报错 - 相对路径从当前文件算起，不是项目根目录；若需跨级，必须写全：
@use "../../styles/colors" - 引入第三方 CSS（如 normalize.css）必须包装：新建
_normalize-wrapper.scss，内容仅一行：@import "node_modules/normalize.css/normalize.css";
为什么不能用 @use "xxx" as * 模拟旧 @import 行为？
@use "xxx" as * 在 Dart Sass 5.0+ 中已被明确禁止，不是“不推荐”，是语法错误。它破坏了命名空间强制机制，而这是 @use 存在的核心价值。
- 错误现象：
Invalid syntax "@use ... as *" - 替代方案：若真需全局变量，应在顶层入口文件（如
main.scss）中@use "vars" as v，再通过additionalData注入 Vite/Webpack 构建链 - 更安全做法：用
@forward封装统一入口，例如_index.scss中@forward "colors" as color-*;，下游@use "index" as i;得到i.color-primary - 容易踩的坑：多个
@use "x" as *会静默覆盖同名成员，但新版 Sass 直接不让写，省得你掉进坑里
calc() 里的 / 安全，但 Sass 层面所有除法必须改用 math.div()
Dart Sass 2.0 实施分层解析：calc() 内部交由原生 CSS 解析器处理，/ 是合法除法；但 Sass 编译层的 / 运算符被彻底移除，所有数学运算必须显式调用 math.div()。
- 错误写法：
width: 100% / 3;→SassError: Invalid CSS after "100%": expected expression - 正确写法：
@use "sass:math"; width: math.div(100%, 3); - 单位必须一致：
math.div(1rem, 2)报错，得先转成math.div(16px, 2)或统一无单位 - 别漏改隐蔽位置：grid-template-columns 中的
1fr / 2fr是 CSS 语法，安全；但1fr / 2（缺单位）会被当 Sass 运算，必须改
真正难的不是把 @import 换成 @use，而是接受 Sass 不再帮你“猜意图”——每个变量来自哪、每个除法单位是否对齐、每个 CSS 文件是否真的该被编译，都得你明说。这会让迁移初期多改几十行，但之后调试时看到 colors.$primary 就知道来源，比翻十层 @import 链靠谱得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
