支持新版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