上一篇找到 wwwroot 後，終於成功把 CSS 套到 .cshtml 上。

雖然按鈕很醜，但至少有出現！！

於是我很自然地想：

既然 CSS 可以，那 SCSS 應該也可以吧？

畢竟我之前學 React 的時候，就是使用 SCSS。

React 時大概就是建立一個 .scss 檔案，再把它引入元件裡：

import './App.scss';

然後執行：

npm run dev

所以我在 C# MVC 專案裡，也很自然地新增了一個 scss 資料夾。

接著寫了：

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

    &:hover {
        opacity: 0.8;
    }
}

存檔、重新整理。

然後……

畫面完全沒有變？

我又開始滿頭問號地求助我的程式助教。

SCSS 和 CSS 到底差在哪裡？

我原本只知道 SCSS 寫起來比較方便。

例如一般 CSS 可能會寫成：

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

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

SCSS 則可以把 hover 寫在按鈕裡面：

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

    &:hover {
        opacity: 0.8;
    }
}

還可以使用變數：

$main-color: blue;

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

這也是我之前喜歡使用 SCSS 的原因。

畫面相關的樣式可以整理在一起，寫起來比純 CSS 方便很多。

但這時我才發現一個很重要的問題：

瀏覽器真的看得懂 SCSS 嗎？

答案是：

看不懂。

瀏覽器真正能讀取的是 CSS。

SCSS 必須先經過編譯，轉成一般 CSS，才能交給瀏覽器使用。

原來 React 也不是「直接看懂」SCSS

我原本的理解是：

React 可以直接寫 SCSS。

但這個說法其實不夠精準。

React 本身並不是負責讀取 SCSS 的工具。

React 專案通常還會搭配一些開發與建置工具，例如：

• Vite
• Webpack
• Create React App 使用的建置工具

當我執行：

npm run dev

開發工具會在背後幫忙處理很多事情。

其中就可能包含：

讀取 SCSS
↓
把 SCSS 編譯成 CSS
↓
將 CSS 提供給瀏覽器
↓
畫面套用樣式

所以我以前在 React 專案裡，只需要寫完 SCSS、存檔，畫面就會跟著變化。

讓我很自然地以為：

React 天生就看得懂 SCSS。

但其實不是。

而是專案裡的工具，早就默默幫我把 SCSS 轉成瀏覽器看得懂的 CSS。

一個暖男在背後默默付出的概念 Q

我之前完全沒有卡在這裡，所以也完全沒發現有人在後面幫忙。

這新手也太容易誤解了吧，汗。

不過 React 專案也不一定天生支援 SCSS

問到這裡，我又差點產生另一個誤解：

所以只要是 React 專案，就一定可以直接寫 SCSS？

其實也不一定。

React 專案通常還是要有對應的 Sass 套件和建置設定。

例如使用 Vite 建立的 React 專案，通常還需要先安裝：

npm install sass

安裝後，Vite 才能在開發過程中處理 .scss 檔案。

所以比較精準的說法是：

React 專案如果已經設定好 Sass 和建置工具，就能在開發時自動把 SCSS 編譯成 CSS。

不是因為 React 本身會編譯 SCSS。

也不是所有 React 專案建立完成後，都一定什麼都不用設定。

只是我以前的學習專案，這些環境早就已經準備好了。

所以我完全沒有感受到中間的編譯步驟。

當環境來到 C#，這裡沒有暖男 XD

到了目前這個 C# MVC 專案，我建立了一個 .scss 檔案。

但是 Visual Studio 不會只因為看到這個副檔名，就自動把它轉成 CSS。

瀏覽器也不會直接讀取 SCSS。

結果當然就是：

我寫得很開心，但畫面完全不知道這個檔案的存在。

菜鳥版理解就是：

React 專案那邊，翻譯工具已經幫我準備好了。
目前的 C# MVC 專案這邊，我要自己確認有沒有翻譯工具。

所以完整流程應該要是：

我寫 SCSS
↓
編譯工具把 SCSS 轉成 CSS
↓
產生可以給瀏覽器使用的 CSS
↓
.cshtml 或 _Layout.cshtml 載入 CSS
↓
瀏覽器顯示樣式

如果少了中間這一步：

SCSS
↓
CSS

那後面的畫面當然完全不會變。

我怎麼確認問題真的出在「沒有編譯」？

我不想只因為 AI 說「SCSS 要編譯」，就直接相信。

所以我回到專案裡做了兩個簡單測試。

測試一：直接修改 CSS

我先直接修改已經有被載入的 CSS：

.test-button {
    background-color: red;
    color: white;
}

儲存、重新整理後，按鈕真的變成紅色。

這代表：

.cshtml 的 class 沒問題
↓
CSS 路徑沒問題
↓
瀏覽器確實有載入這份 CSS

測試二：只修改 SCSS

接著，我只修改 SCSS：

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

儲存、重新整理後，按鈕還是紅色。

完全沒有變成綠色。

這時候就可以先排除：

• .cshtml 的 class 寫錯
• CSS 路徑錯誤
• 瀏覽器完全沒有載入樣式
• 按鈕根本不是自己修改的那一個

問題比較可能出在：

SCSS 修改後，沒有重新產生對應的 CSS。

所以不是 SCSS 寫錯。

而是缺少編譯流程。

SCSS 不會直接出現在瀏覽器裡

這時候我才把整件事真正串起來。

瀏覽器不會去讀：

scss/styles.scss

瀏覽器實際讀的是：

css/styles.css

所以專案裡可能會有這樣的對應：

scss/styles.scss
↓
編譯
↓
wwwroot/css/styles.css

接著共用版面再載入編譯後的 CSS：

<link rel="stylesheet" href="~/css/styles.css" />

不是直接寫：

<link rel="stylesheet" href="~/scss/styles.scss" />

因為瀏覽器不認識 SCSS 語法。

菜鳥版先記成：

SCSS 是開發時寫給工程師看的。
CSS 才是最後交給瀏覽器看的。

如果直接修改編譯後的 CSS 呢？

既然瀏覽器真正讀的是 CSS，那我直接修改 CSS 不就好了？

確實可以。

而且畫面通常也會馬上有變化。

但如果這份 CSS 原本是由 SCSS 編譯產生的，下一次重新編譯時，直接寫在 CSS 裡的內容可能會被蓋掉。

例如：

我直接修改 styles.css
↓
畫面暫時正常
↓
之後重新編譯 styles.scss
↓
styles.css 被重新產生
↓
我直接改的內容消失

所以如果專案原本是用 SCSS 管理樣式，通常應該修改 SCSS 原始檔，再透過編譯工具產生 CSS。

不然很可能今天改成功，隔天又神秘消失。

React 和 C# MVC 的差別到底在哪裡？

整理到這裡後，我先用菜鳥版做一個對照：

所以真正的差別不是：

React 可以用 SCSS，C# 不可以。

而是：

我以前的 React 專案已經設定好 SCSS 編譯流程。
目前這個 C# MVC 專案還沒有，或是我還沒有找到它的編譯方式。

這個說法才比較精準。

C# MVC 專案可以怎麼編譯 SCSS？

繼續詢問後，我才知道，C# MVC 專案也不是不能使用 SCSS。

只是要另外搭配編譯工具。

常見方式可能包括：

• Visual Studio 的 Web Compiler
• Sass CLI
• Gulp
• Webpack
• npm scripts
• 專案原本已經設定好的前端建置流程

不同公司、不同專案，使用的方法可能不一樣。

所以進到既有企業專案後，也不能看到 SCSS 沒反應，就直接亂裝一堆套件。

應該先確認：

1. 專案裡有沒有 package.json
2. 有沒有 gulpfile.js
3. 有沒有 Webpack 或 Vite 設定
4. 有沒有 compilerconfig.json
5. SCSS 檔案旁邊是否已經有對應的 CSS
6. 團隊原本使用哪一種編譯方式
7. 建置專案時是否會自動處理前端資源

這裡也開始有一點企業專案的感覺了。

不是我覺得哪個工具方便，就直接裝進去。

而是要先理解：

這個專案原本是怎麼運作的？

AI 在這一篇幫了我什麼？

我一開始只問：

為什麼 React 可以寫 SCSS，C# MVC 卻沒反應？

問下去之後，又出現很多問題：

是 React 本身看得懂 SCSS 嗎？
瀏覽器能不能直接讀 SCSS？
npm run dev 到底幫我做了什麼？
所有 React 專案都能直接寫 SCSS 嗎？
為什麼修改 CSS 有效，修改 SCSS 卻沒反應？
可以直接改編譯後的 CSS 嗎？
C# MVC 專案要用什麼工具編譯 SCSS？

AI 先告訴我：

SCSS 必須先編譯成 CSS。

但我還是回到專案裡實際測試：

直接修改 CSS
↓
畫面有變

只修改 SCSS
↓
畫面沒變

透過兩個結果的差異，我才確認：

問題不是畫面沒有載入 CSS，而是 SCSS 沒有被編譯成 CSS。

這也比只背一句「SCSS 需要編譯」更有感覺。

菜鳥最後先記住什麼？

目前我先記得：

瀏覽器不認識 SCSS
瀏覽器只認識 CSS

所以 SCSS 的流程一定要經過：

SCSS
↓
編譯工具
↓
CSS
↓
瀏覽器

React 專案看起來像是可以直接寫 SCSS，是因為：

Vite、Webpack 或其他建置工具
早就默默幫忙處理編譯

目前的 C# MVC 專案沒反應，是因為：

Visual Studio 啟動網站
不代表專案已經設定 SCSS 編譯流程

最重要的是：

不是 React 看得懂 SCSS。
也不是 C# MVC 不能使用 SCSS。
差別在於專案有沒有設定負責編譯 SCSS 的工具。

此時主管告訴我：

妳可以裝 Web Compiler。

叮叮！

陌生名詞又出現了。

我又冒出下一個問題：

Web Compiler 又是什麼？要怎麼裝？

下一篇：

Web Compiler 是什麼？終於可以把 SCSS 編譯成 CSS 了嗎？