Lala Code

Lala 的前端大補帖,歡迎一起鑽研前端技術😊

0%

使用 dart-sass 取代 node-sass

sass

今天在更新網站時,github actions 在 npm install 時發生了錯誤

1
2
3
4
npm ERR! code 1
npm ERR! path /home/runner/work/portfolio/portfolio/node_modules/node-sass
// ...中間太多省略
Error: Process completed with exit code 1.

根據資訊推測是 node-sass 的問題,爬了一下文發現,

Sass 官方已在 2020-10-26 正式宣布棄用 LibSass,並推薦使用 Dart Sass

LibSass 顯然沒有足夠的工程帶寬來跟上 Sass 語言的最新發展,且 node-sass 底層依賴 LibSass,常常導致很多使用者安裝的特別的困難,sass 官方已經將 dart-sass 作為未來主要的的開發方向,效能更好。

如果你是 Node Sass 的用戶,遷移到 Dart Sass 很簡單:只需在你的 package.json 文件中將 node-sass 替換為 sass. 這兩個包都公開了相同的 JavaScript API。


安裝 Dart Sass 步驟

1.如果安裝了 node-sass 首先需要解除安裝

1
npm remove node-sass

2.安装 dart-sass

1
npm install sass sass-loader -D

3、如果專案之前用到/deep/需要替換為::v-deep,否則會報錯

安裝錯誤

在安裝的過程中,如果遇到下面錯誤😨

1
2
3
4
5
6
npm ERR! code EBADPLATFORM
npm ERR! notsup Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin"} (current: {"os":"win32","arch":"x64"})
npm ERR! notsup Valid OS: darwin
npm ERR! notsup Valid Arch: undefined
npm ERR! notsup Actual OS: win32
npm ERR! notsup Actual Arch: x64

不要緊張! 把 package-lock.json 移除掉,再 npm install 重新生成,
再安裝一次 dart-sass 就成功啦!!


重新裝了 dart-sass 後,github actions 就跑成功啦!真是可喜可賀😀🌟🌟🌟



Hey!想學習更多前端知識嗎?

最近 Lala 開了前端課程 👉【實地掌握RWD - 12小時新手實戰班】👈
無論您是 0 基礎新手,又或是想學 RWD 的初學者,
我們將帶你從零開始,深入了解並掌握 RWD 響應式網頁設計的核心技術,快來一起看看吧 😊



🚀線上課程分享

線上課程可以加速學習的時間,省去了不少看文件的時間XD,以下是我推薦的一些課程
想學習更多關於前後端的線上課程,可以參考看看。

Hahow

Hahow 有各式各樣類型的課程,而且是無限次數觀看,對學生或上班族而言,不用擔心被時間綁住



六角學院

如果你是初學者,非常推薦六角學院哦!
剛開始轉職也是上了六角的課,非常的淺顯易懂,最重要的是,隨時還有線上的助教幫你解決問題!


Udemy

Udemy 裡的課程非常的多,品質普遍不錯,且價格都滿實惠的,CP值很高!
也是很多工程師推薦的線上課程網站。
❤️