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 就跑成功啦!真是可喜可賀😀🌟🌟🌟



🚀實體工作坊分享

玩轉 Web頁面的前端技術(HTML/CSS/JS) 一日體驗課

最近時賦學苑開了實體體驗課,即使你對程式碼沒有概念也能上手!Lala 會帶你一起做出一個個人品牌形象網站,帶你快速了解前端的開發流程,快跟我們一起玩轉 Web 吧!



🚀線上課程分享

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

Hahow

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



六角學院

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


Udemy

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