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

相关推荐
yume_sibai3 分钟前
大屏数据可视化 - 边框红绿呼吸灯实现详解
前端·信息可视化·typescript
Hyyy29 分钟前
很多Desktop都在上的Computer Use是什么
前端·llm
慢功夫31 分钟前
开篇:VS Code 为什么不是一个普通 React App
前端·visual studio code
你挚爱的强哥42 分钟前
Vue2 实现 1.5s 十连击监听(连续点击若干次),封装通用可复用点击检测工具,不用 data!Vue 封装通用连击监听方法,支持自定义时长与点击次数
前端·javascript·vue.js
huashengzsj1 小时前
Shopify个人建站如何搭建独立站:从零开始的完整指南
前端·网络·人工智能
程序猿小泓2 小时前
从 Claude Code 学 Agent Harness:一个前端工程师的 AI Agent 学习笔记
前端·人工智能·学习
柒和远方2 小时前
从审计日志到可下载证据包:事务型 Outbox、租约 fencing 与保留水位
前端·后端·架构
minglie13 小时前
npm ali-oss库依赖冲突
前端·npm
CryptoPP3 小时前
BSE股票K线数据接入实战:从接口调用到前端图表展示
大数据·前端·网络·人工智能·websocket·网络协议
Random_index4 小时前
#Vue3篇: Vue 项目发版后如何提示用户刷新?基于 package.json 版本号的前端更新检测方案
前端·vue.js·json