1.在chrome中開啟dev工具，開啟容許CSS source maps設定2.webstorm中只要建立了less副檔名的檔案，就會有提示只要你同意就會建立一個firewatchers任務，但是這個預設的任務只能編譯出css。我們需要對這個任務進行一些小小的修改，以便能達到產出sourcemap。 原版配置改造後的配置3.對Arguments 和Output paths to refresh這兩項進行了修改Arguments1 --no-color --source-map=$FileNameWithoutExtension$.css.map $FileName$ Output paths to refresh1 $FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map 這樣就能夠既產出.css檔案又能產出.map檔案了產出的對應的map檔案為1 {"version":3,"sources":["app.less"],"names":[],"mappings":"AAAG;EACF,YAAA;;AAEE;EACA,aAAA;;AAEE;EACJ,UAAA;EACA,eAAA;EACA,iBAAA"}是不是很棒呢，經過簡單設定就可以快樂開發了！4.修改命令的依據是1 lessc app.less app.css --source-map=app.css.map
1.在chrome中開啟dev工具，開啟容許CSS source maps設定2.webstorm中只要建立了less副檔名的檔案，就會有提示只要你同意就會建立一個firewatchers任務，但是這個預設的任務只能編譯出css。我們需要對這個任務進行一些小小的修改，以便能達到產出sourcemap。 原版配置改造後的配置3.對Arguments 和Output paths to refresh這兩項進行了修改Arguments1 --no-color --source-map=$FileNameWithoutExtension$.css.map $FileName$ Output paths to refresh1 $FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map 這樣就能夠既產出.css檔案又能產出.map檔案了產出的對應的map檔案為1 {"version":3,"sources":["app.less"],"names":[],"mappings":"AAAG;EACF,YAAA;;AAEE;EACA,aAAA;;AAEE;EACJ,UAAA;EACA,eAAA;EACA,iBAAA"}是不是很棒呢，經過簡單設定就可以快樂開發了！4.修改命令的依據是1 lessc app.less app.css --source-map=app.css.map