sass調試--頁面看到sass檔案而不是css檔案問題

標籤：

在瀏覽器頁面有時看到sass檔案而不是css檔案問題，其主要由於sass開啟了source-map(調試)功能，問題如：

 

sass調試

sass調試需要開啟編譯時間輸出調試資訊和瀏覽器調試功能，兩者缺一不可。

開啟編譯調試資訊

目前sass的調試分為兩種，一種為開啟debug-info，一種為開啟sourcemap（這個將成為主流）。

如開啟的是debug-info，則解析的css檔案中會有以@media -sass-debug-info開頭的代碼，如沒有則表明沒有開啟。

如開啟的是sourcemap，則在解析的css檔案同目錄下產生一個.css.map的尾碼名檔案。

命令列開啟

兩個的命令分別為--debug-info，--sourcemap，開啟如下：

1 sass --watch style.scss:style.css --debug-info2 sass --watch style.scss:style.css --sourcemap

koala開啟

有關koala的使用請點擊這個http://koala-app.com/index-zh.html

如：點擊相應的檔案，然後就會出現右邊的編譯選項，即可選擇是否開啟source map，debug info

開啟瀏覽器調試Google瀏覽器調試

F12開啟調試面板，點擊調試面板右上方的齒輪表徵圖開啟設定，在general選項中勾選Enable CSS source map 和 Auto-reload generated CSS。

開啟--sourcemap編譯，f12開啟調試面板，就可以看到原先右邊的css檔案變成了我們現在的scss檔案

點擊scss檔案，會跳到source裡面的scss源檔案，現在可以在裡面進行修改，修改完成後可以右鍵選擇save或save as命令，然後替換我們本地的scss源檔案，重新整理chrome就可以看到變化（注意，解析樣式需要一定時間）。以後只要ctrl+s儲存修改就可以在瀏覽器中看到修改效果了。

Firefox瀏覽器調試debug-info調試

firefox可以安裝外掛程式FireSass使用debug-info來調試。

開啟--debug-info編譯，f12開啟firebug，就可以看到原先右邊的css檔案變成了我們現在的scss檔案

sourcemap調試

firefox 29 將會開始支援sourcemap，注意是Firefox內建的調試功能，而不是firebug。

開啟--sourcemap編譯，右鍵“查看元素”採用Firefox內建的調試功能，開啟調試面板，在樣式上右鍵選擇“顯示原始來源”。

點擊scss檔案，這樣就跳到了scss檔案。如：

然後就可以進行我們的修改了，修改之後點擊儲存或者‘ctrl+s‘彈出我們要儲存到哪裡，同Google一樣直接覆蓋到我們本地的源檔案就ok了。

有時用29 beta版本的時候這個功能不太穩定，估計到穩定版本應該就好了。同時期待FireSass這個外掛程式升級支援sourcemap。

sass調試--頁面看到sass檔案而不是css檔案問題