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)

相关推荐
weixin_4080996712 分钟前
【完整教程】天诺脚本如何调用 OCR 文字识别 API?自动识别屏幕文字实战(附代码)
前端·人工智能·后端·ocr·api·天诺脚本·自动识别文字脚本
吴声子夜歌13 分钟前
ES6——Generator函数详解
前端·javascript·es6
吴声子夜歌14 分钟前
ES6——Set和Map详解
前端·javascript·es6
码喽7号44 分钟前
vue学习四:Axios网络请求
前端·vue.js·学习
粥里有勺糖1 小时前
视野修炼-技术周刊第129期 | 上一次古法编程是什么时候
前端·javascript·github
whuhewei2 小时前
JS获取CSS动画的旋转角度
前端·javascript·css
蓝黑20202 小时前
Vue组件通信之v-model
前端·javascript·vue
像素之间2 小时前
为什么运行时要加set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve
前端·javascript·vue.js
M ? A2 小时前
Vue转React实战:defineProps精准迁移实战
前端·javascript·vue.js·经验分享·react.js·开源·vureact
西陵2 小时前
别再写 Prompt 了Spec Mode 才是下一代 AI 编程范式
前端·人工智能·ai编程