本文介绍了如何在新版Chrome中利用WebStorm和Sass/Less的source map进行源文件调试。首先，需要在Chrome开发者工具中开启CSS source maps设置。然后，针对WebStorm的file watchers任务进行配置，确保编译时产出CSS和source map文件。通过调整Arguments参数，指定输出路径，使Sass和Less文件能正确生成对应的.css和.map文件。在HTML中引入CSS文件，并查看CSS文件末尾的source map引用。最后，提到了LiveStyle Chrome插件作为另一种无刷新调试CSS的方案。
旧版的chrome有个support for sass，但是新版chrome没有这个功能了。
看到网上提供的方法比较多，也很乱，旧版新版的都有。而且不能指定自己所需要的路径。
所以就做了下改版。
sass和less都有提供一个map文件，这个文件是用来干嘛的呢？
.map文件是一个json格式的文件，可以直接调试less/sass源文件。
========================================================
先是less配置(sass配置基本与less一致，只是运行参数不太一样)
1.在chrome中开启dev工具，开启CSS source maps设置
2.webstorm中只要创建了less扩展名的文件，就会有提示只要你同意就会创建一个file watchers任务，但是这个默认的任务只能编译出css。我们需要对这个任务进行一些小小的修改，以便能达到产出sourcemap。
原来的配置
3.修改后的配置
最低0.47元/天 解锁文章
扫一扫
3544
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
