Настройка файла compilerconfig.json для автоматической компиляции SCSS в Web Compiler

上一篇已經把 SCSS 的資料夾和主要入口整理好了： scss ├── _variables.scss ├── _buttons.scss ├── _layout.scss ├── _theme.scss └── styles.scss styles.scss 再把其他 Partial 引入： @import "variables"; @import "buttons"; @import "layout"; @import "theme"; 做到這裡時，我原本以為 Web Compiler 已經安裝完成，接下來應該就會自動幫我產生 CSS。 結果回到專案裡看，什麼都沒有發生。 因為 Web Compiler 雖然已經裝好了，但它還不知道： 要編譯哪一個 SCSS？ 編譯後的 CSS 要放在哪裡？ 這兩件事就要透過 compilerconfig.json 告訴它。 compilerconfig.json 是什麼？ 看到這個檔名時，我先把它拆開理解： compiler 編譯器 config 設定 json 設定檔的資料格式 所以 compilerconfig.json 可以先理解成： Web Compiler 的編譯設定檔。 最基本的設定可能會長這樣： [ { "inputFile": "scss/styles.scss", "outputFile": "wwwroot/css/styles.css", "minify": { "enabled": true } } ] 它是在告訴 Web Compiler： 讀取 scss/styles.scss ↓ 編譯成 CSS ↓ 輸出到 wwwroot/css/styles.css ↓ 同時壓縮輸出的內容 inputFile 是什麼？ 先看這一行： "inputFile": "scss/styles.scss" inputFile 是要交給 Web Compiler 編譯的來源檔案。 這裡指定的是： scss/styles.scss 也就是 SCSS 的主要入口。 因為 styles.scss 裡已經引入其他 Partial： 所以 Web Compiler 編譯 styles.scss 時，也會一起處理這些檔案。 _variables.scss _buttons.scss _layout.scss _theme.scss ↓ 被 styles.scss 引入 ↓ styles.scss 成為 inputFile ↓ 交給 Web Compiler 編譯 這也是為什麼不需要把每一個 Partial 都分別寫進 compilerconfig.json。 Partial 主要是讓我們拆開管理樣式，真正交給編譯器的通常還是主要入口。 outputFile 是什麼？ 再來是： "outputFile": "wwwroot/css/styles.css" outputFile 是編譯完成後，要把 CSS 放到哪裡。 這裡代表： scss/styles.scss ↓ Web Compiler ↓ wwwroot/css/styles.css 前面 Day 7 已經整理過，wwwroot 是 ASP.NET Core MVC 專案放靜態檔案的地方。 例如： CSS JavaScript 圖片 字型 瀏覽器最後要取得的是 CSS，所以編譯完成的檔案會放進 wwwroot。 不過每個專案的路徑不一定相同，也可能是： Styles/site.scss ↓ wwwroot/assets/css/site.css 或： scss/admin.scss ↓ wwwroot/css/admin.css 所以不能只看到教學範例，就直接把相同路徑貼進公司專案。 還是要先確認原本的資料夾和命名方式。 minify 是什麼？ 設定裡還有： "minify": { "enabled": true } minify 可以先理解成「壓縮」。 啟用後，Web Compiler 會盡量移除不影響 CSS 執行的內容，例如： 多餘的空格 縮排 換行 部分註解 原本比較容易閱讀的 CSS： .test-button { padding: 8px 16px; color: white; background-color: #3366ff; } 壓縮後可能會變成： .test-button{padding:8px 16px;color:#fff;background-color:#36f} 所以編譯完成後，如果看到 CSS 全部擠在一起，不一定是壞掉。 有可能只是因為開啟了壓縮。 平常要修改樣式，還是回到 SCSS 原始檔，不需要直接閱讀壓縮後的 CSS。 []？ 完整設定外面會有一組中括號： [ ] [ { "inputFile": "scss/styles.scss", "outputFile": "wwwroot/css/styles.css" } ] 中括號代表這裡可以放不只一組編譯設定。 假設專案有前台和後台兩個主要入口，就可能寫成： [ { "inputFile": "scss/site.scss", "outputFile": "wwwroot/css/site.css" }, { "inputFile": "scss/admin.scss", "outputFile": "wwwroot/css/admin.css" } ] 代表： site.scss → site.css admin.scss → admin.css 所以一個專案不一定只會有一份 CSS。 有些專案會按照前台、後台、登入頁或列印樣式，分成不同入口。 我使用的是 Visual Studio 2022，而且前面已經安裝 Web Compiler。 實際操作時，可以先在方案總管找到主要入口： styles.scss 接著按右鍵，查看有沒有 Web Compiler 相關的編譯選項。 不同版本的 Web Compiler，右鍵選單名稱和操作畫面可能不完全一樣。 有些版本可以直接從 SCSS 檔案建立設定，也有可能是專案原本就已經存在 compilerconfig.json。 如果公司專案原本就有 compilerconfig.json，不要急著再建立一份。 應該先打開原本的設定，確認裡面已經編譯哪些檔案。 不然同一個專案出現兩套不同設定，之後反而更難追。 建立完成後，方案總管可能會變成： WebProject ├── scss │ ├── _variables.scss │ ├── _buttons.scss │ └── styles.scss ├── wwwroot │ └── css │ └── styles.css └── compilerconfig.json 還不算。 compilerconfig.json 只是告訴 Web Compiler 要做什麼，還要實際確認它有沒有執行。 我會先在 _buttons.scss 加一段容易辨認的測試樣式： .test-button { padding: 8px 16px; border: 0; color: white; background-color: #3366ff; &:hover { opacity: 0.8; } } 接著儲存並執行編譯。 不同版本或設定下，有些會在儲存時自動編譯，有些則要從右鍵選單手動執行。 所以不要只看到設定檔出現，就直接認定已經成功。 編譯完成後，再到： wwwroot/css/styles.css 確認檔案有沒有產生或更新。 只看到 styles.css 出現還不夠。 因為它可能是之前就存在的舊檔案。 我會直接打開編譯後的 CSS，搜尋剛剛新增的： .test-button 原本 SCSS 寫的是： .test-button { &:hover { opacity: 0.8; } } 編譯後應該可以看到類似： .test-button:hover { opacity: 0.8; } 如果有開啟 minify，它也可能變成： .test-button:hover{opacity:.8} 雖然格式不同，但只要能找到對應的規則，就代表 Web Compiler 確實有處理這份 SCSS。 看到 styles.css 成功產生後，很容易直接打開它修改。 例如按鈕顏色不對，就直接改： .test-button { background-color: red; } 當下重新整理後，可能真的有效。 但下一次 SCSS 重新編譯時，Web Compiler 會重新產生 styles.css，剛剛手動改的內容就可能被蓋掉。 因為： SCSS 是開發時修改的原始檔 CSS 是編譯後產生的結果 所以要修改按鈕樣式，應該回到： _buttons.scss 而不是直接改： styles.css 這一點要認真記住，不然辛苦改完，下一次編譯又全部消失，真的會以為 Visual Studio 在跟我作對 XD 如果修改 _buttons.scss 後，styles.css 沒有更新，我會先照這個順序檢查。 確認 styles.scss 裡有： @import "buttons"; 如果沒有引入，編譯 styles.scss 時就不會處理 _buttons.scss。 確認 compilerconfig.json 指向真正的入口： 路徑或檔名寫錯，Web Compiler 就找不到來源。 儲存 SCSS 不代表每一個環境都會自動編譯。 可以查看右鍵選單、Output 視窗或錯誤訊息，確認編譯是否有執行。 例如少了一個大括號： .test-button { background-color: blue; 就可能造成編譯失敗。 設定可能輸出到： 但我卻一直查看： wwwroot/css/site.css 那當然會覺得 CSS 沒有更新。 我先把排查順序記成： Partial 有沒有被引入？ ↓ inputFile 有沒有寫對？ ↓ Web Compiler 有沒有執行？ ↓ SCSS 有沒有語法錯誤？ ↓ outputFile 有沒有更新？ 至少不會一看到畫面沒變，就開始瘋狂重新整理。 compilerconfig.json 記錄的是專案的編譯方式。 其他人抓下專案後，如果也需要使用相同的 SCSS 入口和 CSS 輸出路徑，這份設定通常會需要團隊共用。 但實際要不要提交 Git，還是要先確認專案原本的規範，例如： .gitignore 有沒有排除它 而且只有 compilerconfig.json 還不夠。 它比較像是工作單，Web Compiler 才是真正執行工作的人。 compilerconfig.json ＝ 告訴工具要做什麼 Web Compiler ＝ 實際負責編譯 所以其他人的開發環境也要有能讀取這份設定的工具。 在公司既有專案裡，先照團隊原本的做法，比自己突然改一套流程安全多了。 compilerconfig.json 是 Web Compiler 使用的編譯設定檔。 最基本的內容可能是： 其中： inputFile ＝ 要編譯的主要 SCSS outputFile ＝ 編譯後產生的 CSS minify ＝ 是否壓縮輸出的內容 完整流程是： Partial ↓ styles.scss ↓ compilerconfig.json ↓ Web Compiler ↓ styles.css ↓ _Layout.cshtml ↓ 瀏覽器 還有一件很重要的事： 不要直接修改編譯後的 CSS。 因為下一次重新編譯時，手動修改的內容很可能會被蓋掉。 下一篇就來處理更現實的問題： SCSS 到底怎麼跑到畫面上？從編譯、CSS 到瀏覽器一次追完