一、sass環境的安裝:
重點:sass是分了2個版本的,都是用來將sass編譯成css的工具。一個是node-sass,另一個是dart-sass。
- node-sass:以前是用這個的,但是這個在安裝時有各種問題。偏偏以前有很多專案是用node-sass來處理scss的。【官方已經棄用】
- 需要 安裝一個二進位制程式(放在github上),沒有的話就需要用python進行編譯。在linux系統編譯時也是出現各種問題。
node-sass
與node.js
版本相關聯,這就導致,一旦本地node.js
升級,就會出現node-sass
無法工作的情況。(很容易因為版本出現問題)
- dart-sass:【官方使用的】
- dart-sass 是用 drat VM 來編譯 sass。不依賴二進位制檔案就可以安裝(drat VM 本身就是 純 JS實現的),直接npm包下載下來就可以了。
- 官方已經放棄 node-sass,使用dart-sass直接更名為sass了,在npm下載的包名就是sass。
node-sass 轉換成 dart-sass:https://juejin.cn/post/7327094228350500914
說明:切換很簡單不需要配置,只要把node-sass解除安裝,安裝上sass就可以了。其它的就是一點語法的調整(sass官方也提供了調整的工具sass-migrator)。
- 解除安裝node-sass安裝dart-sass:
# 解除安裝node-sass npm uninstall node-sass # 安裝dart-sass npm install sass
- 深度選擇器 /deep/ 的修改:
- sass 只支援 ::v-deep 【sass就是dart-sass】