node sass已彻底失去语法兼容能力，因依赖弃用的libsass，无法解析calc()中的/、@container、color-mix()等现代css特性，报错发生在词法层且无法绕过；dart sass通过分层解析支持这些新特性，并严格遵循css规范。

Node Sass 不是“被淘汰”，而是从 2020 年底起就彻底失去语法兼容能力——你写 calc(100% / 3)、@container 或 color-mix(in srgb, red, blue)，它直接报错，连编译都过不去。

Node Sass 解析 / 就崩溃，不是 bug 是设计锁死

libsass（Node Sass 的底层）把所有 / 都当 Sass 除法运算符，哪怕它出现在 calc() 里。错误发生在词法层，// sass:disable-next-line 根本没机会生效。

• width: calc(100% / 3); → 报 SassError: Invalid CSS after "100%": expected expression
• 没有绕过方式：加引号、换写法、插件拦截都无效，因为解析器根本不识别 calc() 是合法 CSS 函数
• Dart Sass 则分层处理：/ 在 calc() 内是 CSS 除法，在别处才需显式用 math.div(100%, 3)

@container、color-mix() 等新 CSS 特性 Node Sass 压根不认识

这些是 2022 年后进入 W3C Candidate Recommendation 阶段的正式特性，Node Sass 的解析器连 token 都无法识别，直接卡在 Unknown at rule 或 Unknown function。

Zenlink - Node SDK for ZenHeart

ZenHeart zenlink 与 zenlink-mcp 为 OpenClaw，涵盖安装、MCP 注册、钩子接线、入站轮询及升级维护。

下载

• @container (min-width: 400px) { ... } → Node Sass 报 Unknown at rule "@container"
• background: color-mix(in srgb, red 50%, blue); → Node Sass 报 Invalid CSS after "color-mix": expected expression
• Dart Sass 能原样透出这些规则，因为它把 CSS 原生语法交给标准 parser 处理，Sass 扩展逻辑再叠加

::v-deep 写法失效不是 Vue 版本问题，是解析规则升级

Vue 2 项目迁移时最常卡在这儿：Node Sass 容忍 ::v-deep.foo 连写，Dart Sass 严格按 CSS 规范解析伪类，容错归零。

• 错误写法：::v-deep.foo → Dart Sass 当成伪类名，报 Unknown pseudo-class selector "::v-deep.foo"
• 正确写法：::v-deep .foo（注意空格），表示后代选择器
• /deep/ 和 >>> 已被完全移除，loader 层面无法降级兼容

迁移只需两步，但工具链残留配置才是真坑

表面上是换包，实际失败多因构建工具仍指向旧实现。尤其 Vue CLI 或 Vite 项目若手动配置了 sass-loader 的 implementation，很容易漏掉。

• 卸载：yarn remove node-sass 或 npm uninstall node-sass
• 安装：yarn add sass -D（注意不是 dart-sass，该包早已重定向并弃用）
• 检查 sass-loader 配置：确认 implementation: require('sass')，而非 require('node-sass')
• 常见症状：Module build failed: SassError: Invalid CSS after "" → 八成是配置没切干净

真正难的不是执行命令，而是接受一个事实：Node Sass 的“兼容”其实是长期纵容语法错误，而 Dart Sass 的报错，才是 CSS 规范本该有的样子。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！