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
|
1
|
--no-color --source-map=$FileNameWithoutExtension$.css.map $FileName$
|
Output paths to refresh
|
1
|
$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
|
環境
| webstorm | less | nodejs |
| 7.0.3（js最好的IDE非廣告） | 1.5+（這個版本才有sourcemap） | 必須 |
轉自：http://www.cnblogs.com/enix/p/3505610.html