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 本来就不该靠容错活着。
