網上說的方案各有各的說法，嘗試多個才找到有效方案，為避免后來者麻煩，現在講講如何調試
筆者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編譯就直接中斷了，所以必須保持命令窗口的狀態
之所以分享這篇文章是發現網上的文章比較老，而且繁瑣，為了避免大家走些彎路，所以在這里做些詳細說明
筆者講的很細，有經驗的童鞋可以跳躍閱讀有用信息即可！