【UniApp】Vue2 scss 预编译器默认已由 node-sass 更换为 dart-sass

从 HBuilderX 4.56+ ,vue2 项目也将默认使用 dart-sass 预编译器。

vue2开发者sass预处理注意:

sass的预处理器,早年使用node-sass,也就是vue2最初默认的编译器。

sass官方推出了dart-sass来替代。node-sass已经停维很久了。

另外node-sass不支持arm cpu,也即Apple的M系列CPU,导致HBuilderX的arm版只能使用dart-sass。

node-sass有些淘汰的写法,在dart-sass里已不再支持。

所以开发者在从vue2升vue3时,使用HBuilderX arm版时,会发现老的vue2项目如果写了废弃scss语法,会编译报错。

DCloud推荐开发者尽快升级到vue3,改用dart-sass。

vue3默认使用的是dart-sass。

解决方案1:

调整为dart-sass支持的语法。文档里提到要把/deep/换成::v-deep。那应该直接替换就行了吧。比如原来的写法是

javascript 复制代码
// 修改前
/deep/ .uni-card__content {
  padding: 0;
}

// 修改后
::v-deep .uni-card__content {
  padding: 0;
}

解决方案2:

如果您希望继续使用node-sass,您可以在 manifest.json 中配置 "sassImplementationName": "node-sass",

相关推荐
竹林81812 小时前
用 wagmi v2 踩坑两天,我终于搞懂了多链钱包切换
前端·javascript
吃乔巴的糖12 小时前
Vue 3 打印模板设计器 (print-canvas-designer)
前端·vue.js
名字都不重要何况昵称13 小时前
canvas 分层渲染思路和脏矩形处理
前端·canvas
布列瑟农的星空13 小时前
前端是否需要架构
前端
子云zy13 小时前
JS 对象与包装类:new 做了什么?字符串为什么有 length?
前端·javascript
还有多久拿退休金13 小时前
LLM应用开发二:让AI学会"翻书"——RAG检索增强从踩坑到跑通
前端·llm
weiggle13 小时前
第二篇:搭建你的第一个 Compose 项目——开发环境与项目结构
android·前端
Simon5231413 小时前
Spring AOP 五大通知类型
java·前端·spring
Asmewill13 小时前
LangGraph学习笔记八(SubGraph)
前端
叶落阁主13 小时前
AntV npm 投毒复盘:一次公司私服缓存恶意包引发的账号封禁事件
前端·安全·npm