Chrome的DevTools：SASS源文件不會被保存在磁盤上

Question

我接着Gogle提供設置sourcemaps說明：本sourcemaps正在 https://developers.google.com/chrome-developer-tools/docs/css-preprocessors

，我可以看到在.scss源鏈接「元素選項卡「。

但我有兩個問題：

1 - 當我在編輯「元素標籤」的CSS屬性.scss休息並DevTools的鏈接顯示鏈接編譯.css文件。

2 - 當我在CSS屬性中的「元素」選項卡上按住Ctrl鍵單擊，在「源」選項卡成功打開，顯示相應的.scss文件。當我更改DevTools內部的文件並嘗試保存它時--DevTools說該文件已保存，但實際上並未保存在磁盤上（似乎將它保存在其他地方）。因此，sass手錶不會更新.css，因爲.scss文件實際上並未保存在磁盤上。

我使用：

- 鉻33.0.1750.154米

-Sass 3.3.4

-SimpleHTTPServer

Answer 1

找到了答案在文章中：https://medium.com/what-i-learned-building/b4daab987fb0

要能夠在Chrome DevTools中編輯源文件需要：

1. 項目添加文件夾作爲工作區（DevTools - 設置 - 工作區 - 添加文件夾）
2. 地圖由Web服務器提供給本地文件的源文件：

按Ctrl +點擊任何CSS屬性打開服務的來源。在源樹中，右鍵單擊該文件並選擇「映射到網絡資源」。

鉻似乎所有其他資源文件夾中的自動映射。現在您可以從DevTools實時編輯源文件。

如果您希望Chrome在更改源文件時自動更新網站，請不要忘記在常規選項卡中啓用「Auto-reload generated CSS」。