用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