css產出sourcemap有什麼用呢,可能你們要問這個問題了。css
請移步這裏html
https://developers.google.com/chrome-developer-tools/docs/css-preprocessors?hl=zh-CNnode
在chrome中咱們經過sourcemap能夠直接調試less源文件文件,這是一個很是強大的功能。web
下面由我爲你們道來chrome
1.在chrome中開啓dev工具,開啓允許CSS source maps設置app
2.webstorm中只要建立了less擴展名的文件,就會有提示只要你贊成就會建立一個firewatchers任務,可是這個默認的任務只能編譯出css。咱們須要對這個任務進行一些小小的修改,以便能達到產出sourcemap。less
原版配置webstorm
改造後的配置工具
3.對Arguments 和Output paths to refresh這兩項進行了修改google
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