码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2014-09-23 02:24:53      阅读:524      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   io   java   ar   strong   for   

旧版的chrome有个support for sass,但是新版chrome没有这个功能了。看到网上提供的方法比较多,也很乱,旧版新版的都有。而且不能指定自己所需要的路径。

所以就做了下改版。

sass和less都有提供一个map文件,这个文件是用来干嘛的呢?

.map文件是一个json格式的文件,可以直接调试less/sass源文件。

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

先是less配置(sass配置基本与less一致,只是运行参数不太一样)

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

bubuko.com,布布扣

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

原来的配置

bubuko.com,布布扣

3.修改后的配置

bubuko.com,布布扣

主要修改Arguments

Arguments  

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

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

4.目录如下

bubuko.com,布布扣

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生成到同一个目录下。

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

bubuko.com,布布扣 

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"

目录结构如下

bubuko.com,布布扣

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

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

标签:style   blog   http   color   io   java   ar   strong   for   

原文地址:http://www.cnblogs.com/JoannaQ/p/3987403.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!