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

相关推荐
小李子呢02113 小时前
前端八股CSS(2)---动画的实现方式
前端·javascript
GreenTea4 小时前
从 Claw-Code 看 AI 驱动的大型项目开发:2 人 + 10 个自治 Agent 如何产出 48K 行 Rust 代码
前端·人工智能·后端
渣渣xiong5 小时前
从零开始:前端转型AI agent直到就业第五天-第十一天
前端·人工智能
布局呆星5 小时前
Vue3 | 组件通信学习小结
前端·vue.js
C澒5 小时前
IntelliPro 企业级产研协作平台:前端智能生产模块设计与落地
前端·ai编程
OpenTiny社区6 小时前
重磅预告|OpenTiny 亮相 QCon 北京,共话生成式 UI 最新技术思考
前端·开源·ai编程
前端老实人灬6 小时前
web前端面试题
前端
Moment7 小时前
AI 全栈指南:NestJs 中的 Service Provider 和 Module
前端·后端·面试
IT_陈寒7 小时前
为什么我的JavaScript异步回调总是乱序执行?
前端·人工智能·后端