vue2开发者sass预处理注意

vue2开发者sass预处理注意

sass的预处理器,早年使用node-sass,也就是vue2最初默认的编译器。

sass官方推出了dart-sass来替代。

node-sass已经停维很久了。

vue3默认使用的是dart-sass。

Uniapp的官方文档截图

从 HBuilderX 4.56+ ,vue2 项目也将默认使用 dart-sass 预编译器。

  • 如果您希望继续使用node-sass,可以在manifest.json根节点配置: "sassImplementationName": "node-sass"; 可选值 "dart-sass" | "node-sass"。
  • sassImplementationName 配置仅限 uni-app(vue2)项目且非 HBuilderX Mac Arm 版本,HBuilder Mac Arm 版本以及uni-app vue3和uni-app x项目仅支持dart-sass

node-sass升级dart-sass常见问题及改进方法:

  • SassError: expected selector. /deep/

解决方案:/deep/ 替换成::v-deep

  • WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

解决方案:使用 math.div() 替换除法运算符 详情,如果遇到@use 'sass:math';编译报错,可以在uni.scss中定义,详情

  • SassError: xxx and xxx are incompatible.

解决方案:calc 在特定情况需要带单位,比如:width: calc(100% - 215) 修改为:width: calc(100% - 215px)

相关推荐
Ratten3 分钟前
解决 error when starting dev server TypeError crypto$2.getRandomValues
前端
coding随想6 分钟前
深入浅出DOM3合成事件(Composition Events):如何处理输入法编辑器(IME)的复杂输入流程
前端
六月的雨在掘金6 分钟前
狼人杀法官版,EdgeOne 带你轻松上手狼人杀
前端·后端
Ratten11 分钟前
【npm 解决】---- TypeError: crypto.hash is not a function
前端
前端小大白11 分钟前
JavaScript 循环三巨头:for vs forEach vs map 终极指南
前端·javascript·面试
晴空雨13 分钟前
面试题:如何判断一个对象是否为可迭代对象?
前端·javascript·面试
嘻嘻__14 分钟前
掘金沸点屏蔽脚本分享
前端·掘金社区
用户479492835691515 分钟前
🎨 Prettier 深度解析:从历史演进到内部格式化引擎的完整拆解
前端
Man15 分钟前
uniapp中使用unocss适配多端
前端·css
阿虎儿16 分钟前
React 事件类型完全指南:深入理解合成事件系统
前端·javascript·react.js