Dart Sass 是唯一支持现代 CSS 语法的 Sass 实现——Node Sass 因依赖已弃用的 libsass，无法解析 calc()、@container、color-mix() 等，且 ::v-deep 写法需严格遵循 CSS 规范；迁移只需卸载 node-sass、安装 sass 并确保 sass-loader 指向 Dart Sass。

Dart Sass 不是“推荐用”，而是“不用就编译不过”——Node Sass 已无法解析 calc(100% / 3)、@container、color-mix() 等现代 CSS 语法，连词法层都直接崩溃。

Node Sass 解析 calc() 中的 / 就报错

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() 等新 CSS 规则

Dart Sass 把 CSS 原生语法交给标准 parser 处理，Sass 扩展逻辑再叠加，所以这些特性能无损透出：

• @container (min-width: 400px) { .card { ... } } → Dart Sass 输出合法 CSS；Node Sass 直接报 Unknown at rule
• background: color-mix(in srgb, red 50%, blue); → Dart Sass 支持；Node Sass 完全不认识该 token
• @use "sass:color" 和 @use "sass:math" 提供对相对颜色、hwb() 等的完整支持

Vue / React 项目迁移时最常卡在 ::v-deep 写法上

这不是语法糖差异，而是解析规则升级：Dart Sass 严格按 CSS 规范解析伪元素，容错性归零：

用于自动切换项目中适合的node 版本

根据 package.json 中的 engines 字段自动检测 Node.js 版本需求，未安装 nvm 时自动安装并切换至对应版本。支持 Windows、macOS、Linux。适用于 Node.js 项目开发、版本切换和环境配置。

下载

• 错误写法：::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
• 安装：yarn add sass -D（注意不是 dart-sass，该包早已重定向并弃用）
• 检查 sass-loader 配置：Vite / Vue CLI 默认已设 implementation: require('sass')，但若项目有手动配置指向 node-sass，会触发 Module build failed: SassError: Invalid CSS after ""

真正难的不是换包，而是意识到：Node Sass 的“兼容”其实是放任错误，而 Dart Sass 的“报错”才是 CSS 规范本该有的样子。一旦项目混用 PostCSS 插件（如 postcss-nesting），Node Sass 输出的未闭合块会直接让后续插件链 crash——这种隐性断裂，比报错更危险。

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