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

相关推荐
小poop1 小时前
CSS 基础与实战:从入门到精通网页美化
前端
Csvn3 小时前
运行时性能
前端
Never_every993 小时前
位图转矢量工具哪个好?实测抠抠图AI位图转矢量工具
大数据·前端
paopaokaka_luck4 小时前
宠物门店经营管理系统(销售与库存联动、进货自动记账、 退换与退款关联、员工个人业绩、ECharts 经营分析、滞销识别与客户分层、宠物档案年龄计算)
前端·javascript·spring boot·mysql·echarts·mybatis·1024程序员节
空中湖4 小时前
用 React 写数据大屏:为什么我不建议用图表库
前端·react.js·前端框架
欣欣之王来了6 小时前
原始HTML插值:v-html指令的使用与安全风险
前端·学习·架构·项目·vue3教程
IT_陈寒6 小时前
Redis的LRU淘汰策略坑了我一整天
前端·人工智能·后端
计算机魔术师6 小时前
砍半价格、参数再涨,国产旗舰追到 Opus 鼻尖了
前端
特立独行的猫A6 小时前
10 MB 的桌面 AI 客户端:用仓颉 + 系统 WebView 替代 Electron
前端·harmonyos
修炼的dance7 小时前
白底图存JPG,sharp开mozjpeg背景杂点少近三成
前端