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)

相关推荐
书语时3 分钟前
ES6 深克隆与浅克隆详解:原理、实现与应用场景
前端·javascript·es6
Magnum Lehar21 分钟前
vulkan游戏引擎的核心交换链swapchain实现
java·前端·游戏引擎
henujolly43 分钟前
yarn、pnpm、npm
前端
江城开朗的豌豆1 小时前
JavaScript篇:构造函数 vs Class:谁才是对象创建的王者?
前端·javascript·面试
江城开朗的豌豆1 小时前
JavaScript篇:数组找不同:如何快速找出两个数组间的'单身狗'元素?
前端·javascript·面试
不吃鱼的羊2 小时前
ISOLAR软件生成报错处理(七)
java·前端·javascript
TE-茶叶蛋2 小时前
React-props
前端·javascript·react.js
安分小尧2 小时前
[特殊字符] 超强 Web React版 PDF 阅读器!支持分页、缩放、旋转、全屏、懒加载、缩略图!
前端·javascript·react.js
EndingCoder2 小时前
React从基础入门到高级实战:React 高级主题 - React Concurrent 特性:深入探索与实践指南
前端·javascript·react.js·前端框架
EndingCoder2 小时前
React从基础入门到高级实战:React 生态与工具 - React Query:异步状态管理
前端·javascript·react.js·前端框架