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

轉載于:https://www.cnblogs.com/fxair/p/3919674.html

總結

以上是生活随笔為你收集整理的用webstorm自动编译less产出css和sourcemap的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。