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-info
2 sass --watch style.scss:style.css --sourcemap

koala開啓

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

以下圖：點擊相應的文件，而後就會出現右邊的編譯選項，便可選擇是否開啓source map，debug info

開啓瀏覽器調試

谷歌瀏覽器調試

F12打開調試面板，點擊調試面板右上角的齒輪圖標打開設置，在general選項中勾選Enable CSS source map 和 Auto-reload generated CSS。

開啓--sourcemap編譯，f12打開調試面板，就能夠看到原先右邊的css文件變成了咱們如今的scss文件

點擊scss文件，會跳到source裏面的scss源文件，如今能夠在裏面進行修改，修改完成後能夠右鍵選擇save或save as命令，而後替換咱們本地的scss源文件，刷新chrome就能夠看到變化（注意，解析樣式須要必定時間）。之後只要ctrl+s保存修改就能夠在瀏覽器中看到修改效果了。

火狐瀏覽器調試

debug-info調試

firefox能夠安裝插件FireSass使用debug-info來調試。

開啓--debug-info編譯，f12打開firebug，就能夠看到原先右邊的css文件變成了咱們如今的scss文件

sourcemap調試

firefox 29 將會開始支持sourcemap，注意是火狐自帶的調試功能，而不是firebug。

開啓--sourcemap編譯，右鍵「查看元素」採用火狐自帶的調試功能，打開調試面板，在樣式上右鍵選擇「顯示原始來源」。

點擊scss文件，這樣就跳到了scss文件。以下圖：

而後就能夠進行咱們的修改了，修改以後點擊保存或者'ctrl+s'彈出咱們要保存到哪裏，同谷歌同樣直接覆蓋到咱們本地的源文件就ok了。

有時用29 beta版本的時候這個功能不太穩定，估計到穩定版本應該就行了。同時期待FireSass這個插件升級支持sourcemap。