dart sass是当前唯一能正确编译现代css语法的实现,因node sass基于已弃用的libsass,无法解析calc(100% / 3)、@container、color-mix()等特性,错误发生在词法层且不可绕过;dart sass通过分层解析严格遵循css规范,支持新特性原样透出,并要求::v-deep等写法符合标准。

Dart Sass 不是“推荐用”,而是不换就编译失败——calc(100% / 3)、@container、color-mix() 这类写法在 node-sass 里直接报错,且无法绕过。
node-sass 解析 / 就崩溃,不是 bug 是能力缺失
node-sass 基于已终止维护的 LibSass,它的词法解析器把所有 / 都当 Sass 除法运算符处理。哪怕你只写在 calc() 里:
width: calc(100% / 3);
就会报 SassError: Invalid CSS after "100%": expected expression。加 // sass:disable-next-line 没用——错误发生在词法层,根本没走到注释解析逻辑。
- Dart Sass 按 CSS 规范分层解析:
/在calc()内就是除法,在别处才需显式写math.div(100%, 3) - node-sass 对
@container、@layer、color-mix()等 2022 年后进入 CR 的特性完全不认识,报Unknown at rule - 这些不是“新功能支持慢”,而是底层解析器压根没实现对应语法树节点
sass 包就是 Dart Sass,别再装 dart-sass 或 node-sass
npm 上的 sass 是官方 Dart Sass 的 JS 封装,开箱即用;而 dart-sass 包早在 2022 年就重定向并弃用,node-sass 自 2020 年 10 月起仅修高危安全漏洞,无任何新特性更新。
使用一条命令部署ProbeChain Rydberg测试网代理节点。自动注册为Agent(NodeType=1),免gas,支持macOS/Linux/Windows。触发词:/r
- 正确安装:
yarn add sass -D或npm install sass --save-dev - 错误操作:
yarn add dart-sass(已失效)、npm install node-sass(可能装上但构建必崩) - 检查
package.json:确保node-sass完全消失,sass在devDependencies中
::v-deep 必须带空格,否则样式丢失
这不是“写法风格差异”,而是 Dart Sass 严格按 CSS 选择器语法解析的结果:
- 错误写法:
::v-deep.foo→ 被当成一个伪类名,报Unknown pseudo-class selector "::v-deep.foo" - 正确写法:
::v-deep .foo(注意空格)→ 表示后代选择器,样式生效 -
/deep/和>>>已被 Dart Sass 完全移除,loader 层面无法降级兼容 - Vue 3 推荐更明确的写法:
::v-deep(.foo),编译后生成带属性选择器的合法 CSS
构建工具配置残留 node-sass 会导致静默失败
即使卸载了 node-sass 并装了 sass,如果 sass-loader 配置里还硬编码了 implementation: require('node-sass'),构建时仍会触发 Module build failed: SassError,且错误信息可能不提示具体原因。
- Vite / Vue CLI 默认已设
implementation: require('sass'),但老项目常有手动覆盖 - 检查 Webpack 配置中的
sass-loaderoptions,删掉或改写为implementation: require('sass') - 如果是
vite.config.ts,确认css.preprocessorOptions.sass下没有残留implementation字段
真正卡住人的从来不是换包本身,而是那些看似无关的细节:一个空格、一个斜杠、一行配置。Dart Sass 的“严格”不是门槛,而是 CSS 标准本该有的样子——它不帮你容错,因为现代 CSS 本来就不该靠容错活着。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










