[工具] Visual Studio Code 延伸模組 Live Sass Compiler 多專案設定

前陣子開發 Angular 專案時使用了多工作區建置，在 css 開發上習慣使用 scss 配合
Live Sass Compiler 這個延伸模組來編譯成 css，在單一專案下預設的組態配置已經夠用了，但如果是同工作區專案，因為在 vscode 裡還是同一個工作區，如按照預設組態配置會只有一個專案內的 scss 會被編譯，另一個專案的 scss 是不會被處理的，這裡分享自己於多專案情況下的配置組態。

在安裝完 Live Sass Compiler 延伸工具後開啟設定檔。

以下為範例的多專案目錄配置

接著輸入以下內容並存檔

{
  "liveSassCompile.settings.formats": [
    {
      "format": "compressed",
      "extensionName": ".css",
      "savePath": "~/../assets/style/"
    }
  ],
  "liveSassCompile.settings.includeItems": [
    "/projects/project1/src/scss",
    "/projects/project2/src/scss"
  ]
}

formats.savePath 為輸出的 css 路徑，"~/…/assets/style" 意思為輸出到各自專案的 /assets/style 資料夾

includeItems 為只包含的指定目錄下的 .scss 編譯，可避免預設一開始將 angular 產生的 app.component.scss 與 style.scss 編譯，這裡選擇為另外開設一個 scss 資料夾管理 .scss 檔並只針對其內容編譯。

按下 Watch Sass 執行 Live Sass Compiler

接著在各自專案的 src/scss 目錄建立 .scss 檔案後隨意編寫一些 css 後存檔，即可在 assets/style 看到編譯後的 .css 檔。

這裡只記錄對於多專案的配置組態，還有其他的設定可至設定文件查詢。