css産出sourcemap有什麼用呢，可能大家要問這個問題了。
請移步這裡
https://developers.google.com/chrome-developer-tools/docs/css-preprocessors?hl=zh-CN
在chrome中我們通過sourcemap可以直接調試less源檔案檔案，這是一個非常強大的功能。
下面由我為大家道來
1.在chrome中開啟dev工具，開啟容許CSS source maps設定
2.webstorm中隻要建立了less擴充名的檔案，就會有提示隻要你同意就會建立一個firewatchers任務，但是這個預設的任務隻能編譯出css。我們需要對這個任務進行一些小小的修改，以便能達到産出sourcemap。
原版配置
3.對Arguments 和Output paths to refresh這兩項進行了修改
Arguments
--no-color --source-map=$FileNameWithoutExtension$.css.map $FileName$
Output paths to refresh
$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map
這樣就能夠既産出.css檔案又能産出.map檔案了
産出的對應的map檔案為
{"version":3,"sources":["app.less"],"names":[],"mappings":"AAAG;EACF,YAAA;;AAEE;EACA,aAAA;;AAEE;EACJ,UAAA;EACA,eAAA;EACA,iBAAA"}
是不是很棒呢，經過簡單設定就可以快樂開發了！
4.修改指令的依據是
lessc app.less app.css --source-map=app.css.map 環境
| webstorm | less | nodejs |
| 7.0.3（js最好的IDE非廣告） | 1.5+（這個版本才有sourcemap） | 必須 |