如何从旧版Node-sass平滑升级到Dart Sass以支持新CSS？-css教程-PHP中文网

必须卸载 node-sass 并彻底替换为 dart sass（即 sass 包），因为 node-sass 基于已终止维护的 libsass，不支持 @layer、@container、color-mix() 等现代 css/sass 语法，且在 node.js 16+ 下编译失败率高；残留 node-sass 会导致 sass-loader 自动 fallback，必须执行 npm uninstall node-sass sass-loader、删 node_modules 和 package-lock.json、再 npm install -d sass sass-loader@^13.3.2，并显式配置 implementation: require("sass")。

如何从旧版node-sass平滑升级到dart sass以支持新css？

必须卸载 node-sass，改用 sass（Dart Sass）——不是“升级”，而是彻底替换；否则编译失败、语法不识别、CI 构建卡住都是必然结果。

为什么 npm install node-sass --save-dev 不能解决问题

node-sass 是 LibSass 的封装，而 LibSass 在 2020 年底已终止开发。它根本不认识 @layer、@container、color-mix()、CSS 自定义属性嵌套等现代语法，遇到就直接报错 Invalid CSS after "@layer" 或 Expected selector。即使你装了 node-sass@6.0.1，它仍无法解析这些语法——这不是版本低，是引擎压根没实现。

更隐蔽的问题是：node-sass 依赖 Python 2.7 和 node-gyp 编译，在 Node.js 16+ 环境下安装极易失败；CI 流水线常因二进制下载超时中断；Windows 用户几乎必踩 MSBUILD : error MSB4132。

所有新 Sass 语言特性（@use、模块作用域、sass:math）只在 Dart Sass 中可用
Vue CLI 5+、Webpack 5+ 默认适配的是 sass，不是 node-sass
残留 node-sass 会导致 sass-loader 自动 fallback，你以为换了，其实没换

卸载和安装必须一步到位，顺序不能错

执行以下三步，缺一不可，且不能跳过中间清理：

运行 npm uninstall node-sass sass-loader —— 必须同时卸载两个包，sass-loader 旧版会硬绑定 node-sass
删除 node_modules 和 package-lock.json —— 否则 npm install 可能复用缓存里的 node-sass require 路径
运行 npm install -D sass sass-loader@^13.3.2 —— sass-loader@13.3.2 是当前 Webpack 5 最稳版本，@14 已开始要求 Webpack 5.80+

注意：sass 包名就是 sass，不是 dart-sass（后者是旧名，已弃用）。装完后检查 node_modules/sass 下是否有 dist/sass.dart.js，有即为正确 Dart Sass。

jinn-node

在Jinn网络为自主项目工作赚取代币奖励，让闲置的OpenClaw代理开始工作。

下载

Webpack 或 Vue CLI 配置里藏着最危险的坑

很多项目构建不报错但实际仍在用 node-sass，就是因为配置里写了硬编码路径。必须逐项排查：

Webpack 配置中，sass-loader 的 options.implementation 必须显式写成 implementation: require("sass")，不能留空或写 require("node-sass")
Vue CLI 用户：确认 vue.config.js 中 css.loaderOptions.sass 下没有 nodeSass 字段；如有，删掉整段
检查 vue.config.js 或 webpack.config.js 是否有插件（如 MiniCssExtractPlugin）覆盖了 loader 链，导致 sass-loader 未生效
搜索整个项目：grep -r "require.*node-sass" .，确保无残留调用

常见静默失败现象：npm run serve 正常启动，但修改 .scss 文件后热更新没反应，或 @use 报错——大概率是配置里漏改了 implementation。

迁移后报错别慌，90% 是原来被宽容掩盖的语法问题

Dart Sass 解析更严格，不是它出问题，而是你代码里一直有问题：

Invalid CSS after "@import" → 全部 @import 必须换成 @use，且 @use 必须在文件最顶部，不能在 @media 或 @if 块内
Undefined variable "$xxx" → 检查是否漏了 @use "path/to/vars" as *，或变量定义写在了 @use 之后
Invalid syntax for "&" → 写成 &:hover，不是 & :hover（空格非法）；SCSS 不需要花括号，删掉 {}
混用 .sass（缩进语法）和 .scss？sass 包默认不支持前者，统一转成 .scss 后缀再迁移