［前端］使用 npm 來編譯 SCSS
為甚麼寫這篇文章?
使用 SCSS 來管理 CSS 可以說是每次建置專案的起手式了，加上很常搭配客製化 Bootstrap 來開發，因此決定記錄下引入過程、遇到的錯誤訊息與解決辦法，以節省日後建置時間，如果對你也有幫助，那就太好了。
前情提要
常見且免費的 SCSS 編譯有這三種，這三種都使用過，使用起來最便利也最推薦的就是第三種使用 npm 的方式，也就是本文接下來會介紹的內容。
步驟一 : 建立 package.json 檔案
(在終端機輸入以下指令)
npm init步驟二 : 前往 npm 官方網站，在搜尋欄位輸入 "sass"
點選第一個搜尋結果進入頁面，可以看到相關 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 sassCLI 已經就緒後，就可以開始將 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
謝謝你的閱讀觀看! 😊
參考文章 :
相關連結 :
