旧版的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

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

  1. 用webstorm自动编译less产出css和sourcemap

    css产出sourcemap有什么用呢,可能大家要问这个问题了. 请移步这里 https://developers.google.com/chrome-developer-tools/docs/css ...

  2. [less]用webstorm自动编译less产出css和sourcemap

    css产出sourcemap有什么用呢,可能大家要问这个问题了. 请移步这里 https://developers.google.com/chrome-developer-tools/docs/css ...

  3. 拒绝IE8-,CSS3 transform rotate旋转动画效果(支持IE9+/chrome/firefox)

    <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta nam ...

  4. CSS预处理器 Less Sass,Scss 编译 Sourcemap调试

    sass.less和stylus的安装使用和入门实践     SASS用法指南    Sass Basics CSS预处理器 css preprocessor 预处理器即preprocessor,预处 ...

  5. 最新版chrome浏览器如何离线安装crx插件?(转载)

    原文链接:https://newsn.net/say/chrome-crx-offline.html mac新版chrome开启离线插件安装 对于mac新版chrome,注意,大家一定要按照顺序来.m ...

  6. 使用chrome查看页面元素的css样式

    使用chrome查看页面元素的css样式 我们在写页面的时候,可能总是不知道怎么回事,就发现某个元素出现了问题,但是不知道为什么会这样,这时候,就需要使用强大的chrome了!!! 举例说明: 1. ...

  7. 将less编译成css的gulp插件

    简介:gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码, ...

  8. chromedriver对应的支持的Chrome版本(更新至Chrome63)

    很多网友在配置chromedriver的时候会遇到很多麻烦,在网上找了很多资料觉得这个表格不错,就给大家分享出来,希望对大家配置chrome的时候有帮助: chromedriver版本 支持的Chro ...

  9. chromedriver版本 支持的Chrome版本

    在使用selenium测试时,如果选择chrome浏览器,需要将chrome driver的exe文件放在项目下 错误的driver版本,会导致无法正常打开本机的浏览器 以下为对应关系 来自网络 ch ...

随机推荐

  1. [Java解惑]字符串

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  2. SQL Server 小技巧【2】

    --1.不要使用×来查询所有字段 SELECT * FROM DBO.tb1 --改为 SELECT FName,PWD,CreateDate FROM DBO.tb1 (NOLOCK) --2.查询 ...

  3. lotusscript基本语法

    LotusScript是一种使用于Lotus Notes客户端程序或者是用于Domino服务器程序代理列表中的脚本语言.相当于用于网页中的脚本语言JavaScript.(JavaScript以可以用于 ...

  4. Thinkphp 3.2 添加 验证码 如何添加。

    1,在home模块indexController.class.php中,加入以下代码 <?php namespace Home\Controller; use Think\Controller; ...

  5. iOS - MVVM 架构模式

    1.MVVM 从字面意思来理解,MVVM 即 Modal View ViewModel(模型 视图 视图模型).MVC 是一个用来组织代码的权威范式,也是构建 iOS App 的标准模式.Apple ...

  6. 使用phpmaill发送邮件的例子

    首先,要下载php_mail软件包 核心代码: index.php <?php include "mail.php"; if (!empty($_POST['to']) &a ...

  7. 新建我的 第一个maven项目

    maven是管理项目的,myeclipse是编写代码的.第一次写项目都要配置好多东西,很麻烦,now 来看看怎样新建一个maven项目. 百度经验:jingyan.baidu.com 工具/原料   ...

  8. Python类、模块、包的区别

    类 类的概念在许多语言中出现,很容易理解.它将数据和操作进行封装,以便将来的复用. 模块 模块,在Python可理解为对应于一个文件.在创建了一个脚本文件后,定义了某些函数和变量.你在其他需要这些功能 ...

  9. 【linux命令】:查看当前登录用户的信息,本文介绍3种方法

    作为系统管理员,你可能经常会(在某个时候)需要查看系统中有哪些用户正在活动.有些时候,你甚至需要知道他(她)们正在做什么.本文为我们总结了4种查看系统用户信息(通过编号(ID))的方法. 1. 使用w ...

  10. 根据出生日期计算年龄的sql各种数据库写法

    ORACLE数据库: ) KINGBASE数据库: DB2数据库: TIMESTAMPDIFF(,