Visual Studio 使用 SASS / SCSS (Visual Studio Compile SASS / SCSS With Web Compiler)

Visual Studio 使用 SASS / SCSS (Visual Studio Compile SASS / SCSS With Web Compiler)

2024-02-24 14:44| 来源: 网络整理| 查看: 265

說明安裝 Web Compiler設定 CompilerConfig設定 TaskRunner 自動編譯參考資料

筆記如何使用 Visual Studio 在專案中編譯 SASS 與 SCSS 檔案，用以模組化的管理 CSS。

說明安裝 Web Compiler

藉由安裝 Web Compiler 即可在專案中編譯 SASS(SCSS), LESS, JS Es6，安裝是由「延伸模組」進行安裝，安裝的過程必須重新啟動 Visual Studio。

設定 CompilerConfig

安裝完成後，可以藉由設定 CompilerConfig.json 來指定編譯的 source 與 output 非常方便，同時可以參考 CompilerConfig.json.defaults 的設定來調整 Compile 的細節與行為。

使用的情境是從 /Content/SCSS 下的 site.scss 更新後，自動異動對應到 /Content/site.css。MVC 中則由 /App_Start/BundleConfig.cs 設定 Bundle Site.css 一氣呵成。

bundles.Add(new StyleBundle("~/Content/css").Include( "~/Content/bootstrap.css", "~/Content/site.css"));

設定 TaskRunner 自動編譯

藉由設定 TaskRunner 可以讓 Web Compiler 自動對檔案進行編譯，只要有異動 CompilerConfig.json 對應的來源檔案，目標檔案就會自動更新非常方便。

參考資料

黑暗執行緒 - Web Essentials 2015不再支援SCSS/LESS自動編譯

【本文地址】

公司简介

联系我们