chrome 調試 SASS

第一步: 執行sass預編譯指令

先來我的專案資料夾結構:

->進入sass /css檔案下->開啟cmd指令 ->輸入sass --watch --scss  test.scss:test.css     如下圖:->

 

進入sass專案發現檔案多了test.css.map和test.css兩個資料夾,如下圖:

這裡產生的test.css.map是chrome調試的關鍵 ->

開啟chrome F12開發者工具 ->輸入專案位址,來設定chrome,使它支援map調試:

 

->下一步 勾選Enable CSS source maps

->如下圖(查看圖中的注意事項):

在source裡面開啟css/test.scss檔

但是我們在chrome上面更改了test.scss內容卻無法保存,左上角總是出現黃色嘆號提示,如下圖:

那麼來看一下怎麼把它加入工作區,也就是它原本在專案中存在的位置

 

-> 然後chrome會要求取得這個檔案的操作權限,點選容許就可以了->發現source下方多了css資料夾,這樣test.scss就和你本地的專案中的test.scss關聯上了

同時要注意是你編輯器裡面的程式碼也跟著變了,如下圖:

也就是說,你更改chrome裡面的test.scss,本地test.scss也會跟著變.

差不多就把調試步驟說完了,當然chome瀏覽器一直在更新對SASS的支援,可能後面的設定就不會那麼麻煩了,所以上面的步驟僅供參考.