【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",

相关推荐
拉不动的猪6 小时前
图文引用打包时的常见情景解析
前端·javascript·后端
浩男孩6 小时前
🍀继分页器组件后,封装了个抽屉组件
前端
Dolphin_海豚6 小时前
@vue/reactivity
前端·vue.js·面试
该用户已不存在6 小时前
程序员的噩梦,祖传代码该怎么下手?
前端·后端
namehu6 小时前
前端性能优化之:图片缩放 🚀
前端·性能优化·微信小程序
摸鱼的春哥6 小时前
【编程】是什么编程思想,让老板对小伙怒飙英文?Are you OK?
前端·javascript·后端
尘世中一位迷途小书童6 小时前
版本管理实战:Changeset 工作流完全指南(含中英文对照)
前端·面试·架构
尘世中一位迷途小书童7 小时前
VitePress 文档站点:打造专业级组件文档(含交互式示例)
前端·架构·前端框架
甜瓜看代码7 小时前
666
前端
吃饺子不吃馅7 小时前
【八股汇总,背就完事】这一次再也不怕webpack面试了
前端·面试·webpack