上一篇終於搞懂：

不是 React 看得懂 SCSS。
而是 React 專案裡的工具，早就默默把 SCSS 編譯成 CSS。

但是目前這個 C# MVC 專案裡，沒有工具自動幫我處理。

所以我就算很認真的建立一個 .scss 檔案，再很認真的寫了一堆樣式，瀏覽器還是完全不理我。

因為瀏覽器真正看得懂的是 CSS，不是 SCSS。

這時主管告訴我：

妳可以裝 Web Compiler。

Web Compiler...我馬上打開程式助教問：

Web Compiler 是什麼？
裝了之後，就可以把 SCSS 變成 CSS 嗎？

Web Compiler 是什麼？

我先用菜鳥版理解：

Web Compiler 是安裝在 Visual Studio 裡的編譯工具，可以幫忙把 SCSS 轉換成瀏覽器看得懂的 CSS。

它負責的流程大概是：

我撰寫 SCSS
↓
Web Compiler 讀取 SCSS
↓
把 SCSS 編譯成 CSS
↓
網站載入編譯後的 CSS
↓
瀏覽器顯示樣式

所以 Web Compiler 並不是讓瀏覽器突然學會看懂 SCSS。

而是在瀏覽器取得檔案之前，先幫忙完成轉換。

菜鳥版可以先記成：

SCSS 是我撰寫的原稿。
Web Compiler 是翻譯工具。
CSS 是最後交給瀏覽器的成品。

編譯和轉譯是一樣的嗎？

這裡我又卡在一個小地方。

前面有時候會說「把 SCSS 轉成 CSS」，有時候又會說「編譯 SCSS」。

那到底要用哪一個詞？

以 SCSS 來說，最常見的說法是：

把 SCSS 編譯成 CSS。

因為工具會讀取 SCSS 裡的變數、巢狀語法和其他 Sass 功能，再產生標準 CSS。

例如我寫：

$main-color: blue;

.test-button {
    background-color: $main-color;

    &:hover {
        opacity: 0.8;
    }
}

編譯後可能會變成：

.test-button {
    background-color: blue;
}

.test-button:hover {
    opacity: 0.8;
}

所以它不是單純把檔案複製一份。

而是把 SCSS 特有的語法處理掉，產生瀏覽器可以讀取的 CSS。

主管已經說可以裝，那就來安裝吧

我們主管說了：

可以安裝 Web Compiler

不過大家安裝前還是要注意公司環境可否使用Web Compiler

保險起見也要確認：

• 公司使用的是哪一個 Visual Studio 版本，我們使用的是 Visual Studio 2022
• 搜尋到的擴充功能是否支援目前版本
• 公司電腦是否有安裝擴充功能的權限
• 專案是否已經有相關設定檔
• 團隊實際使用的是哪一個 Web Compiler 版本

Web Compiler 要去哪裡安裝？

我原本還以為會像以前在 React 專案裡安裝套件一樣，開啟 Terminal 後輸入：

npm install

結果 Web Compiler 是 Visual Studio 的擴充功能，可以直接從 Visual Studio 裡搜尋。

先打開 Visual Studio 上方選單：

Extensions 擴充功能/延伸模組
↓ 
Manage Extensions 管理擴充功能/管理延伸模組

進入管理擴充功能後，在搜尋欄輸入：

Web Compiler

搜尋結果可能不只一個

我們公司使用2022，所以我就安裝第一個2022+ (畫面已顯示已安裝)
找到適合的版本後，按下：

Download 安裝

中文版介面可能會顯示：

下載

這邊注意:Visual Studio 的部分擴充功能需要等 Visual Studio 關閉後，才能繼續安裝

因為擴充功能需要修改 Visual Studio 本身正在使用的檔案

程式還開著時，有些檔案可能正在被占用，所以安裝程序會先等待

所以流程大概是：

打開 Extensions
↓
進入 Manage Extensions
↓
搜尋 Web Compiler
↓
確認版本相容
↓
按下 Download
↓
關閉 Visual Studio
↓
安裝程序開始執行
↓
完成安裝
↓
重新開啟 Visual Studio

關閉 Visual Studio 後，可能會出現擴充功能安裝畫面

依照畫面完成安裝後，再重新打開 Visual Studio。

怎麼確認 Web Compiler 真的有安裝成功？

可以再次進入：

Extensions
↓
Manage Extensions

然後查看：

Installed

中文版可能會顯示成：

已安裝

確認 Web Compiler 是否有出現在已安裝的擴充功能清單裡

如果有出現，就能先確認：

Web Compiler 已經安裝進目前的 Visual Studio。

另外，也可以回到方案總管，在 .scss 檔案上按右鍵

如果右鍵選單裡出現 Web Compiler 相關功能，也可以作為另一個確認方式

不過不同版本的擴充功能，顯示的選項名稱可能不完全一樣。

所以還是要以自己實際安裝的版本為準。

專案裡這麼多 SCSS，難道要一個一個設定？

安裝完成後，我回到專案的 SCSS 資料夾。

結果看到裡面一大堆檔案：

_variables.scss
_buttons.scss
_layout.scss
_theme.scss
styles.scss

我看著這一整排檔案，馬上又冒出下一個問題：

所以這些 .scss，每一個都要自己設定編譯一次嗎？

光想就覺得好麻煩。

例如專案裡如果有二十個 SCSS：

_buttons.scss
_forms.scss
_table.scss
_modal.scss
_header.scss
_footer.scss

難道我要每一個都：

按右鍵
↓
設定編譯
↓
指定輸出 CSS

那最後不就會產生一大堆 CSS？

而且這些檔名前面為什麼都有：

_

這條底線是裝飾嗎？

還是有特殊功能？

我原本以為 Day 9 裝完 Web Compiler，事情就結束了。

結果真正的問題才正要開始。

AI 在這一篇幫了我什麼？

這一篇我主要問了：

Web Compiler 是什麼？
它和 React 裡的 Vite、Webpack 有點像嗎？
它是 npm 套件，還是 Visual Studio 擴充功能？
要去哪裡安裝？
為什麼按下下載後還要關閉 Visual Studio？
怎麼確認真的安裝成功？
為什麼裝完後 SCSS 還是沒有反應？

AI 先幫我把安裝流程拆開。

但我還是透過實際操作確認：

進入管理擴充功能
↓
搜尋 Web Compiler
↓
確認版本
↓
下載
↓
關閉 Visual Studio
↓
完成安裝
↓
重新開啟
↓
確認已安裝清單

最後才知道：

安裝 Web Compiler，只是準備好編譯工具。

還沒有真正告訴工具：

這個專案的 SCSS 到底要怎麼編譯。

菜鳥最後先記住什麼？

目前我先記得：

Web Compiler
是安裝在 Visual Studio 裡的擴充工具
可以協助把 SCSS 編譯成 CSS

安裝位置是：

Extensions
↓
Manage Extensions
↓
搜尋 Web Compiler

安裝流程是：

搜尋擴充功能
↓
確認版本相容
↓
下載
↓
關閉 Visual Studio
↓
完成安裝
↓
重新開啟
↓
確認是否已安裝

還有一個很重要的觀念：

安裝 Web Compiler，只代表 Visual Studio 已經有編譯 SCSS 的工具，不代表專案裡的 SCSS 會立刻全部自動編譯。

安裝完後，我還要先整理清楚：

SCSS 資料夾要怎麼建立？
↓
哪一個 SCSS 是主要入口？
↓
檔名前面的 `_` 代表什麼？
↓
為什麼不用把每一個 SCSS 都分別編譯？

看著專案裡這一大堆：

_variables.scss
_buttons.scss
_layout.scss
_theme.scss
styles.scss

我原本以為它們只是被拆成很多小檔案，結果每一種檔案在整個 SCSS 結構裡，其實都有不同的用途。

下一篇：

Web Compiler 裝好了，SCSS 要怎麼建立？