第一步: 執行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的支援,可能後面的設定就不會那麼麻煩了,所以上面的步驟僅供參考.
