node sass因基于已终止维护的libsass，无法解析calc()、@container等现代css语法，词法层即报错；dart sass则按规范正确透出原生css特性，并要求::v-deep等写法符合标准。
因为 Sass 3（即 Node Sass）根本无法解析现代 CSS 语法，不是“不推荐”，而是“编译直接失败”——calc(100% / 3)、@container、color-mix() 这些写进去就报错，连词法层都过不去。
Node Sass 解析 / 就崩溃，不是 bug 是底层设计缺陷
Node Sass 基于已终止维护的 libsass（2020 年底官方弃用），它的解析器把所有 / 都当 Sass 除法运算符，不管它是不是在 calc() 里：
-
width: calc(100% / 3);→ 报错SassError: Invalid CSS after "100%": expected expression -
// sass:disable-next-line完全无效——错误发生在词法解析阶段，压根没走到“禁用”逻辑 - 你不能靠注释绕过，因为 libsass 根本不识别
calc()是原生 CSS 函数
Dart Sass 能正确透出 @container、color-mix() 等新规则
Dart Sass 把 CSS 原生语法交给标准 parser 处理，Sass 扩展逻辑再叠加，所以这些特性不是“被支持”，而是“不被干扰”地原样输出：
-
@container (min-width: 400px) { .card { } }→ 输出合法 CSS；Node Sass 直接报Unknown at rule -
background: color-mix(in srgb, red 50%, blue);→ Dart Sass 支持；Node Sass 报Invalid CSS after "color-mix" -
@use "sass:color"和@use "sass:math"提供对hwb()、相对颜色等的完整支持
::v-deep 写法失效不是语法糖问题，是 CSS 解析规则升级
这不是 Dart Sass “变严格”，而是它终于按 CSS 规范做事了：::v-deep 是伪元素，后面必须有空格才能表示后代关系：
- 错误写法：
::v-deep.foo→ Dart Sass 当成伪类名解析，报Unknown pseudo-class selector "::v-deep.foo" - 正确写法：
::v-deep .foo（注意空格）→ 表示“后代选择器”，样式生效 -
/deep/和>>>已完全移除，无法通过 loader 降级兼容
迁移只需两步，但工具链残留配置最容易翻车
看似简单，实操中常因旧配置未清理干净导致构建失败：
- 卸载：
yarn remove node-sass或npm uninstall node-sass（必须彻底删掉，否则 loader 可能 fallback） - 安装：
yarn add sass -D（注意不是dart-sass，该包早已重定向并弃用） - 检查
sass-loader配置：Vite / Vue CLI 默认已设implementation: require('sass')，但若项目手动配了require('node-sass')，会触发Module build failed: SassError: Invalid CSS after ""
真正难的不是换包，而是意识到：Node Sass 的“兼容”其实是放任错误，而 Dart Sass 的“报错”才是 CSS 规范本该有的样子。那些曾经能跑通的写法，很可能只是侥幸没被规范校验拦住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
