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)