用webstorm自動編譯less產出css和sourcemap

用webstorm自動編譯less產出css和sourcemap

在chrome中咱們經過sourcemap能夠直接調試less源文件文件，這是一個很是強大的功能。
請看https://developers.google.com/chrome-developer-tools/docs/css-preprocessors?hl=zh-CN

1. 在chrome中開啓dev工具，開啓允許CSS source maps設置

2. 配置webstorm Setting(Ctrl+Alt+s)

webstorm中只要建立了less擴展名的文件，就會有提示只要你贊成就會建立一個firewatchers任務，可是這個默認的任務只能編譯出css。咱們須要對這個任務進行一些小修改，便能達到產出css的同時又能夠產出sourcemap。

對 Arguments 和 Output paths to refresh進行修改就能夠
Arguments：

$FileName$ $FileParentDir$\css\$FileNameWithoutExtension$.css --source-map

意思是在指定的css目錄下生成的css和map文件，其中你的配置須要看你的項目的構建如圖。

只要明白less的命令，在Arguments中設置正確的路徑就好了，不配置Output paths to refresh也能夠達到同樣的效果。

lessc style.less ../css/style.css --source-map

3. 而後是來時其餘文章的摘抄啦

sass的配置方法也是同樣,它生成css和map的命令行參數以下：
sass bootstrap.scss:../css/bootstrap.css --sourcemap --no-cache

在Arguments 中的參數以下

--no-cache --sourcemap $FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css

4. 在html中，加入css文件

<link rel="stylesheet" href="../themes/css/bootstrap.css">

其實能夠打開css文件看下，最後一行有個

/# sourceMappingURL=bootstrap.css.map /

引用的.map文件。。
以前爲了方便調試，把.map和css生成到同一個目錄下。
當打開頁面訪問的時候，點擊樣式
http://blog.csdn.net/ylh644894056/article/details/25924171link