［前端］使用 npm 來編譯 SCSS

為甚麼寫這篇文章?

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

前情提要

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

步驟一 : 建立 package.json 檔案

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

npm init

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

npm 官方網站

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

步驟三 : install sass

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

npm i sass

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

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

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

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

Set-ExecutionPolicy RemoteSigned

Set-ExecutionPolicy -Scope CurrentUser

終端機畫面截圖 :

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

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

步驟四 : 將 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

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

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

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

可以輸入以下指令 :

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

停止自動編譯 :

Ctrl-C

謝謝你的閱讀觀看! 😊

參考文章 :

Day03 — 把 sass 從 npm 帶回家

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

第 12 集：Sass 編譯環境

相關連結 :

npm 官方網站

Sass 官方網站