爲什麼在檢查元素時只顯示css文件？

Question

首先，當我在網頁開發過程中使用chrome瀏覽器檢查元素時，它曾經顯示確切的scss（css預處理器）文件，其中存在這些樣式。這非常有幫助。但是現在當我檢查一個元素時，它只顯示計算出的css文件。我無法確切瞭解我的瀏覽器發生了什麼。是否應該更改任何設置？請提出解決方案。

Answer 1

你可能會丟失源地圖文件（.map）

從Chrome Devtools Docs：

對於支持CSS源地圖預處理程序，DevTools讓你 實時編輯您的預處理程序的源文件在「來源」面板中，然後 查看結果，而無需離開DevTools或刷新頁面。 當您檢查其樣式由生成的 CSS文件提供的元素時，元素面板將顯示指向原始源 文件的鏈接，而不是生成的.css文件。

檢查Chrome是否精選啓用：

CSS源地圖默認情況下啓用。您可以選擇啓用 自動重新生成生成的CSS文件。

要啓用CSS源地圖和CSS重裝：

1. 打開DevTools設置，然後單擊常規。

2. 打開啓用CSS源圖和自動重新載入生成的CSS。

大多數現代IDE支持SCSS也生成地圖文件，檢查你的IDE設置，以確保這些文件在每次編譯SCSS代碼時創建的。

style.scss compiles into: 
|_ style.css 
|_ style.css.map