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)

相关推荐
月月大王1 小时前
easyexcel导出动态写入标题和数据
java·服务器·前端
JC_You_Know2 小时前
多语言网站的 UX 陷阱与国际化实践陷阱清单
前端·ux
Python智慧行囊2 小时前
前端三大件---CSS
前端·css
Jinuss3 小时前
源码分析之Leaflet中Marker
前端·leaflet
成都渲染101云渲染66663 小时前
blender云渲染指南2025版
前端·javascript·网络·blender·maya
聆听+自律3 小时前
css实现渐变色圆角边框,背景色自定义
前端·javascript·css
牛马程序小猿猴4 小时前
17.thinkphp的分页功能
前端·数据库
huohuopro4 小时前
Vue3快速入门/Vue3基础速通
前端·javascript·vue.js·前端框架
大溪地C4 小时前
CSS详细学习笔记
css·笔记·学习
草巾冒小子4 小时前
vue3中解决 return‘ inside ‘finally‘ block报错的问题
前端·javascript·vue.js