必须执行 npm ls node-sass 和 npm ls sass 确认实际依赖;若共存且配置了 implementation: require('node-sass'),需删除该配置,改用 require('sass') 并确保已安装 sass 包,同时检查 @use 语法、路径引用及构建缓存。

确认当前是否真在用 node-sass
别凭印象判断。执行 npm ls node-sass,如果输出非空,说明它还在依赖树里;再跑 npm ls sass,若两者共存,sass-loader 默认会优先用 node-sass(除非显式指定 implementation)。Vue CLI 4.5+ 或 Webpack 5 默认倾向 sass,但老项目常被手动锁死在 node-sass。
删掉 implementation: require('node-sass') 配置
搜索 vue.config.js 或 webpack.config.js 中所有 implementation: require('node-sass'),全部删掉。现代 sass-loader@12+ 会自动找 sass 包;若你写了 implementation: require('sass'),请确认路径无误——不能写成 require('dart-sass'),npm 包名就是 sass。
如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更
- 保留该配置却没装
sass→ 报错Cannot find module 'sass' - 保留但指向了
node-sass→ 即使已卸载,Webpack 缓存可能 fallback 成功,掩盖问题 - 某些 UI 库(如
element-ui)的 SCSS 文件隐式依赖node-sass,卸载后需验证样式是否仍正常编译
@import 改 @use 时变量访问必须加前缀
Dart Sass 1.33+ 起强制模块语义:@import 不再自动注入变量/函数到全局作用域。常见报错如 SassError: function percentage is not a function → 改用 math.percentage($val)(percentage() 是 libsass 特有,已移入 sass:math 模块)。
-
@use "variables"后,必须写variables.$primary-color,不能直接用$primary-color - 想保持全局访问,可用
@use "variables" as *,但会失去命名空间隔离 -
@use "utils"失败?检查文件名:私有文件(如_utils.scss)不能直接@use,得重命名为utils.scss或用@forward导出 - 路径必须带引号且以
./或../开头:@use "./variables",不能省略.
calc() 和 ::v-deep 这类语法不是“不兼容”,而是规范回归
width: calc(100% / 3) 在 Dart Sass 下不再报错,但 / 必须出现在 CSS 函数内才被识别为原生除法;若写在 Sass 表达式中(如 $w / 3px),得用 math.div($w, 3px)。
-
::v-deep .foo正确(注意空格),:::v-deep.foo错误 → Dart Sass 按 CSS 规范解析伪元素,不带空格会被当成未知伪类 -
/deep/和>>>已完全移除,loader 层无法降级兼容 -
@container、color-mix()等现代 CSS 语法可直接使用,Node Sass 会在词法层崩溃,Dart Sass 则原样透出
node-sass 引用、缓存未清、或 @use 路径没按 Dart Sass 的模块规则写全。这些点不处理,装再新版本也白搭。前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










