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)

相关推荐
不会敲代码11 天前
手写 Zustand:三十分钟带你搞懂状态管理库的核心原理
前端·javascript·源码
神奇的程序员1 天前
重构了自己5年前写的截图插件
前端·javascript·架构
UXbot1 天前
一人独立交付 UI + 前端:AI 驱动 UI 设计工具的五大功能模块深度评测
前端·低代码·ui·设计模式·交互
kobesdu1 天前
【ROS2实战笔记-19】ROS2 生命周期节点的启动顺序、状态转换陷阱与热备方案
java·前端·笔记·机器人·ros·ros2
诚实可靠王大锤1 天前
React Native 输入框与按钮焦点冲突解决方案(rn版本0.70.3)
前端·javascript·react native·react.js
kyriewen1 天前
测试妹子让我写单测,我偷偷用AI一天干完一周的活
前端·chatgpt·cursor
2601_957780841 天前
Claude Code 2026年最新部署指南:从环境搭建到技能扩展
前端·人工智能·ai编程·claude
zhangfeng11331 天前
workbuddy 专家 “前端开发师” 结合nvidia-mistral-small-4-119b-2603 项目计划-前端界面开发.md
前端·人工智能·免费
IT_陈寒1 天前
为什么Java的Stream并行处理反而变慢了?
前端·人工智能·后端
NiceCloud喜云1 天前
IntelliJ IDEA 保姆级安装 + ClaudeAPI 配置教程
java·开发语言·前端·ide·chrome·docker·intellij-idea