直接换掉node-sass，用sass（dart sass）是唯一可靠解法，因node-sass基于已停更的libsass，不支持css自定义属性、@layer等现代语法，而dart sass为官方唯一维护实现，全面支持新特性；迁移需彻底卸载node-sass和sass-loader，安装sass与sass-loader@^13，清理node_modules和package-lock.json，并确保配置中无require('node-sass')残留。
直接换掉 node-sass，用 sass（Dart Sass）——这是唯一可靠、无需反复折腾的解法。
为什么 node-sass 无法编译新版 CSS 语法？
node-sass 基于已停止维护的 LibSass 引擎，不支持 CSS 自定义属性（--var）、@layer、@container、级联层等现代 CSS 特性；它对 SCSS 语法的解析也宽松，会悄悄忽略部分嵌套错误或非法插值，导致迁移后暴露真实问题。
- LibSass 在 2020 年底终止开发，不再接收任何语法更新
- Dart Sass 是官方唯一维护的实现，自 v1.30 起全面支持 CSS nesting、
@use规则、模块化作用域等 - 即使你强行升级
node-sass@6.x，它仍无法识别@layer utilities或color-mix()等新语法，编译直接失败
如何安全迁移到 sass（Dart Sass）？
迁移不是“升级”，而是替换：旧包必须彻底清除，否则加载顺序冲突会导致 sass-loader 仍调用 node-sass。
- 执行
npm uninstall node-sass sass-loader（注意：两个都要卸载） - 安装新组合：
npm install -D sass sass-loader@^13（sass-loader@13.3.2是当前 Webpack 5 最稳版本） - 删掉
node_modules和package-lock.json，再npm install—— 避免残留node-sass的 require 路径 - 检查构建配置：Vue CLI 用户确认
vue.config.js中无nodeSass字段；Webpack 用户确保sass-loader配置里没硬编码implementation: require('node-sass')
迁移后 SCSS 编译报错怎么办？
报错不是 Dart Sass 有问题，而是原来被 node-sass 宽容掩盖的语法问题浮出水面。
-
Invalid CSS after "@import"：确认所有@import已替换为@use，且@use必须在文件最顶部（不能嵌套、不能条件判断） -
Undefined variable "$color-primary"：Dart Sass 作用域更严格，检查是否漏了@use "path/to/vars" as *，或变量是否定义在@use之后 -
Invalid syntax for &：删除& :hover中的空格，正确写法是&:hover；嵌套中避免{换行缩进（SCSS 不需要花括号） - 若项目混用
.sass（缩进语法）和.scss，sass包默认不支持前者——统一转成.scss后缀再迁移
真正卡住的往往不是命令执行，而是配置里某处残留的 nodeSass 字段、loader 链中某个插件覆盖了 sass-loader 输出、或者 CI 环境里缓存了旧版 node_modules。清干净再重来，比反复 rebuild 有效得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
