支持新版chrome,用webstorm编译形成css和sourcemap,调试sass和less源文件

旧版的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.修改后的配置

主要修改Arguments

Arguments  

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

意思是在指定的css目录下生成的css和map文件

4.目录如下

5.其实,只要明白less的命令,在Arguments中设置正确的路径就行了,不配置Output paths to refresh也可以达到一样的效果。

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

6.sass的配置方法也是一样

它生成css和map的命令行参数如下:

sass  bootstrap.scss:../css/bootstrap.css --sourcemap --no-cache

Arguments 中的参数如下

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

7.在html中,加入css文件

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

其实可以打开css文件看下,最后一行有个

/*# sourceMappingURL=bootstrap.css.map */

引用的.map文件。。

之前为了方便调试,把.map和css生成到同一个目录下。

当打开页面访问的时候,点击样式 

 

8.LiveStyle

Chrome插件LiveStyle可以结合Sublime Text3编辑器实现无刷新的同步css更新。效果也是不错,可以借鉴。

不过还是喜欢sass/less结合webstorm的调试方式。 

================

9.新增compass配置 

在Arguments 中的参数如下

compile
Output paths to refresh
$FileNameWithoutExtension$.css

config.rb中配置如下。

http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"

目录结构如下

转载自:http://blog.csdn.net/ylh644894056/article/details/25924171

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。