当前位置: 首页 > web开发 > 工具 > 正文

如何用webstorm自动编译less产出css和sourcemap

时间:2016-05-31 cnblogs 小玉西瓜

css产出sourcemap有什么用呢,可能大家要问这个问题了。

请移步这里

https://developers.google.com/chrome-developer-tools/docs/css-preprocessors?hl=zh-CN

在chrome中我们通过sourcemap可以直接调试less源文件文件,这是一个非常强大的功能。

下面由我为大家道来

1.在chrome中开启dev工具,开启容许CSS source maps设置

如何用webstorm自动编译less产出css和sourcemap

2.webstorm中只要创建了less扩展名的文件,就会有提示只要你同意就会创建一个firewatchers任务,但是这个默认的任务只能编译出css。我们需要对这个任务进行一些小小的修改,以便能达到产出sourcemap。

原版配置

如何用webstorm自动编译less产出css和sourcemap

改造后的配置

如何用webstorm自动编译less产出css和sourcemap

本栏目更多精彩内容:http://www.bianceng.cn/webkf/tools/