dart sass 2.0 的报错不是bug，而是规范回归：它停止“猜意图”，严格按css标准和sass语义校验，如calc()内/合法、sass层除法须用math.div()、::v-deep必须带空格、@use须置顶且路径有效。
不是 Dart Sass 2.0 故意报错，而是它不再帮你“猜意图”——所有报错都对应真实 CSS 规范或 Sass 语义的越界行为。旧项目能跑，是因为 node-sass 或早期 Dart Sass 宽容地吞掉了非法结构；Dart Sass 2.0 把边界划清了。
calc() 里写 100% / 3 突然报错
错误现象：SassError: Invalid CSS after "100%": expected expression
这不是 bug，是解析器分层后的必然结果：Dart Sass 2.0 默认启用「CSS 原生解析优先」模式，calc() 内部交由标准 CSS parser 处理，/ 是合法除法；但如果你在 Sass 层面（比如变量赋值、@if 判断）用了 /，就必须改用 math.div(100%, 3)。
常见误操作：
- 把
width: calc(100% / 3)当成 Sass 表达式去解析（实际应原样透传） - 没加
@use "sass:math"就直接调math.div() - 在 Vue 的
:deep(.foo)里嵌套写了calc()，却忘了 PostCSS 还没介入，Sass 层就先报错了
::v-deep .foo 缺少空格或冒号数量不对
错误现象：Unknown pseudo-class selector "::v-deep.foo" 或编译直接中断
Dart Sass 2.0 按真实 CSS 伪类语法校验，::v-deep 是一个双冒号伪元素（尽管语义上是穿透），必须带空格才能正确解析为“伪类 + 后代选择器”。
必须这样写：
-
::v-deep .foo✅（两个冒号 + 空格 + 类名） -
/deep/ .foo❌（已完全移除，不兼容） -
>>>❌（同上，无回退机制） -
::v-deep.foo❌（缺空格，被当做一个整体伪类名）
Vue 2 项目中尤其容易漏掉空格，建议全局搜索 ::v-deep\.（正则）并替换为 ::v-deep .。
@use 位置错、路径错或作用域泄漏
错误现象：Undefined variable "$color-primary" 或 Invalid CSS after "@use"
Dart Sass 2.0 强制执行模块化作用域：@use 必须出现在文件最顶部，不能包裹在 @media、@if 或嵌套块里；且路径必须可解析，不能含非法字符或相对路径越界。
典型陷阱：
-
@use "../vars" as *在子目录 SCSS 里执行，但上级无vars.scss -
@use "src/styles/functions"路径对，但文件里没导出函数（缺少@forward或@export） - 混用
@import和@use：Dart Sass 2.0 不再支持@import加载模块，旧@import "mixins"会直接失败 - 变量在
@use前就被引用（如文件开头有$tmp: red;，然后才@use "colors"）
PostCSS 插件顺序错导致新 CSS 特性被提前拦截
错误现象：Unexpected token :has 或 Invalid selector 出现在 :has()、:is() 上
Dart Sass 不负责解析这些现代伪类——它只输出字符串。如果 :has() 出现在 &:has(.badge) 这种嵌套中，Sass 会尝试按 SCSS 语法解析，而它根本不认识 :has，于是报错。
正确做法：
- 所有
:has()、:is()、:where()必须作为完整选择器独立出现，例如：.card:has(.badge) { }，不能放在&后拼接 - 确保构建链中 PostCSS（含
postcss-preset-env）在 Sass 编译之后执行 - Vue CLI/Vite 中检查是否启用了
css.postcss配置，且未被 loader 覆盖 - 避免在 Sass 文件里写
@supports (selector(:has(*)))——selector()是 CSS 函数，不是 Sass 函数
真正容易被忽略的是：Dart Sass 2.0 的报错从不“多此一举”。每一条都指向你过去靠宽容掩盖的真实问题——比如变量作用域混乱、选择器语义错位、或工具链顺序失当。修复它不是为了迁就新版本，而是让样式真正符合浏览器预期。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
