1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. 網頁設計
  6. »
  7. [外掛] VSCode 自動即時編譯器 Live Sass Compiler 安裝與輸出路徑設定
網頁開發 網頁設計

[外掛] VSCode 自動即時編譯器 Live Sass Compiler 安裝與輸出路徑設定

2020/08/07

梅問題-[外掛] VSCode 自動即時編譯器 Live Sass Compiler 安裝與輸出路徑設定
  目前比較夯的網頁編輯器,已不再是Sublime Text而是微軟所推出的 Visual Studio Code,而相當佛心的是Visual Studio Code不但完全免費,且功能還相當的完整,甚至還整合了版控與豐富的外掛,同時在安裝外掛,也比Sublime Text來的簡單許多,因此也讓許多網頁設計,紛紛的投靠Visual Studio Code。

  雖然梅干大部分時候,還是習慣使用Sublime Text,最主要的原因就在於,先前梅干花了不少時間,在Sublime Text中建了不少的速碼,但最近因為手邊一些專案,讓梅干在寫SCSS時,就得編寫完並發佈,網頁才能讀取的到,實在有些小麻煩,因此梅干最近研究了一下,發現 Visual Studio Code有個相當好用的外掛 Live Sass Compiler,除了可即時的監控SCSS檔外,當按下儲存時,就會自動轉存成CSS,相當的方便因此有在用SCSS的朋友,Visual Studio Code這款Live Sass Compiler絕不容錯過喔!


Step1
在開啟了VSCode後,點一下左邊的外掛圖示,並輸入「Live Sass Compiler」的關鍵字,當找到外掛後,再按下 Install 鈕,進行安裝。
梅問題-[外掛] VSCode 自動即時編譯器 Live Sass Compiler 安裝與輸出路徑設定
Step2
安裝完畢後,再回到檔案總管底下。
梅問題-[外掛] VSCode 自動即時編譯器 Live Sass Compiler 安裝與輸出路徑設定
Step3
將SCSS檔案,開啟到VSCode中,接著再按下方的「Watch Sass」 。
梅問題-[外掛] VSCode 自動即時編譯器 Live Sass Compiler 安裝與輸出路徑設定
Step4
這時就會看到,立即就會將SCSS轉存成CSS,並儲存在原路徑底下,由於目前正在監控,因此當編寫任何的SCSS,只需按下儲存,CSS文件也會同步更新。
梅問題-[外掛] VSCode 自動即時編譯器 Live Sass Compiler 安裝與輸出路徑設定
Step5
若想改變CSS的輸出路徑時,將原目錄的.map檔案給刪除。
梅問題-[外掛] VSCode 自動即時編譯器 Live Sass Compiler 安裝與輸出路徑設定
Step6
接著開啟,喜好設定 / 設定
梅問題-[外掛] VSCode 自動即時編譯器 Live Sass Compiler 安裝與輸出路徑設定
Step7
接著輸入setting,在看到Settings:Formats的項目時 點下方的編輯連結。
梅問題-[外掛] VSCode 自動即時編譯器 Live Sass Compiler 安裝與輸出路徑設定
Step8
再把下方的碼貼上。
梅問題-[外掛] VSCode 自動即時編譯器 Live Sass Compiler 安裝與輸出路徑設定
Step9
這時再回到原來的畫面中,再點下方的「Watch Sass」。
梅問題-[外掛] VSCode 自動即時編譯器 Live Sass Compiler 安裝與輸出路徑設定
Step10
鏘~鏘~這時CSS檔案,就會儲存在CSS的目錄底下啦!因此透過VSCode的這個SASS自動編譯器,讓在寫SCSS真的超方便的啦!
梅問題-[外掛] VSCode 自動即時編譯器 Live Sass Compiler 安裝與輸出路徑設定