Chrome瀏覽器下調試SASS

網上說的方案各有各的說法，嘗試多個才找到有效方案，爲避免後來者麻煩，如今講講如何調試

 

筆者ruby版本爲3.4.19，由於sass文件的編譯是須要ruby環境的，使用sass前須要先安裝！

 

第一步(核心)：在sass文件目錄下，執行命令以下（筆者圖方便，簡單命名爲a.scss）

                    sass --watch --scss --sourcemap a.scss:a.css

               

第二步：在Chrome瀏覽器中點按F12進入開發者工具點擊設置按鈕

第三步:在設置框中勾選「Enable CSS source maps」 便可

 

第四步:在項目中引用sass文件編譯之後對應的css樣式文件

                

第五步:在chrome瀏覽器中打開這個html頁面（打開測試頁面前必定要重凱Chrome，筆者被坑了屢次，就是由於沒有關閉Chrome重開），細心的能夠發現，chrome瀏覽器中加載出來的a.scss文件,這個文件就是本次調試的關鍵

               

 

第六步:在chrome瀏覽器中編輯a.scss

第七步:鼠標右鍵保存，ruby就會開始編譯，看圖以下：(切記scss文件中千萬別出現中文，中文會致使ruby執行編譯報錯)，

                    

第八步:刷新chrome瀏覽器，就能夠看到頁面的樣式變化了，

                    

第九步:瀏覽器中的css樣式文件已經更新了

                     

第十步:而後查看本地的scss文件和css文件發現確實被更新了

                     

第十一步:這個過程基本就達到了在瀏覽器調試直接更新項目文件的要求了

 

優勢：瀏覽器端的樣式修改能直接和項目中的scss及css樣式作到聯動，減小重複勞動

 

缺點：若是sass命令的執行窗口關閉了，sass編譯就直接中斷了，因此必須保持命令窗口的狀態

 

之因此分享這篇文章是發現網上的文章比較老，並且繁瑣，爲了不你們走些彎路，因此在這裏作些詳細說明

筆者講的很細，有經驗的童鞋能夠跳躍閱讀有用信息便可！