[前端]使用 npm 來編譯 SCSS

閱讀時間約 3 分鐘


為甚麼寫這篇文章?

使用 SCSS 來管理 CSS 可以說是每次建置專案的起手式了,加上很常搭配客製化 Bootstrap 來開發,因此決定記錄下引入過程、遇到的錯誤訊息與解決辦法,以節省日後建置時間,如果對你也有幫助,那就太好了。

前情提要

常見且免費的 SCSS 編譯有這三種,這三種都使用過,使用起來最便利也最推薦的就是第三種使用 npm 的方式,也就是本文接下來會介紹的內容。




步驟一 : 建立 package.json 檔案

(在終端機輸入以下指令)

npm init


步驟二 : 前往 npm 官方網站,在搜尋欄位輸入 "sass"

npm 官方網站

raw-image

點選第一個搜尋結果進入頁面,可以看到相關 cli 指令與說明,以下記錄我所輸入的指令。


步驟三 : install sass

(在終端機輸入以下指令)

npm i sass

這時候我的終端機跳出錯誤訊息 ( 如果你的順利安裝便可跳過 )

raw-image

透過這兩篇教學文,輸入以下兩行指令解決錯誤

教學文 : [解決方式] 因為這個系統上已停用指令碼執行,所以無法載入

教學文 : serve : 因為這個系統上已停用指令碼執行,所以無法載入 C:\Users\jbudu\AppData\Roaming\npm\serve.ps1 檔案

Set-ExecutionPolicy RemoteSigned
Set-ExecutionPolicy -Scope CurrentUser

終端機畫面截圖 :

raw-image

這時候可以看 package.json 檔案裡多了 scss 的版本號 (第四行),這樣代表有成功安裝。

denpendencies 列出了所安裝的 package 與該 package 的版號。

raw-image

步驟四 : 將 scss 編譯成 css

將 Sass 安裝在全域 ( 而不是僅安裝在這個專案的範圍中而已 ) :

npm install -g sass

如此一來我們也可以把專案裡面的 sass 給移除:

npm uninstall sass

CLI 已經就緒後,就可以開始將 SCSS 的檔案編譯成原生的 CSS 了,在你的專案資料夾裡面建立一個 scss 的檔案 ( 檔案位置視專案情況而定 );本次範例我是將 all.scss 檔案放在 scss 資料夾裡面,並且希望編譯後的 css 是在 templates 資料夾裡面。

透過官方文件可以得知將 SCSS 編譯成 CSS 的指令:

sass ./scss/all.scss ./templates/all.css

便可以得到一份依據 all.scss 打包而成的 all.css 與 all.css.map

raw-image
raw-image

到此就代表成功編譯啦!!

若在建置專案的過程中希望可以自動偵測 scss 檔案的異動執行自動編譯,

也就是監聽指定的檔案,如有任何更動即自動編譯。(達到自動化)

可以輸入以下指令 :

sass  --watch ./scss/all.scss ./templates/all.css

停止自動編譯 :

Ctrl-C


謝謝你的閱讀觀看! 😊




參考文章 :

Day03 — 把 sass 從 npm 帶回家

Day04 — 把 Sass/SCSS 變成 CSS(1)

第 12 集:Sass 編譯環境

相關連結 :

npm 官方網站

Sass 官方網站


2會員
21內容數
關於 Html 、 Css 、JS 等相關程式語言的學習筆記或開發紀錄
留言0
查看全部
發表第一個留言支持創作者!