【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。那应该直接替换就行了吧。比如原来的写法是
// 修改前 /deep/ .uni-card__content { padding: 0; } // 修改后 ::v-deep .uni-card__content { padding: 0; }
解决方案2:
如果您希望继续使用node-sass,您可以在 manifest.json 中配置 "sassImplementationName": "node-sass",
免责声明:我们致力于保护作者版权,注重分享,被刊用文章因无法核实真实出处,未能及时与作者取得联系,或有版权异议的,请联系管理员,我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理! 图片声明:本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库和百度,360,搜狗等多加搜索引擎自动关键词搜索配图,如有侵权的图片,请第一时间联系我们。