支持新版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
支持新版chrome,用webstorm编译形成css和sourcemap,调试sass和less源文件(转)的更多相关文章
- 用webstorm自动编译less产出css和sourcemap
css产出sourcemap有什么用呢,可能大家要问这个问题了. 请移步这里 https://developers.google.com/chrome-developer-tools/docs/css ...
- [less]用webstorm自动编译less产出css和sourcemap
css产出sourcemap有什么用呢,可能大家要问这个问题了. 请移步这里 https://developers.google.com/chrome-developer-tools/docs/css ...
- 拒绝IE8-,CSS3 transform rotate旋转动画效果(支持IE9+/chrome/firefox)
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta nam ...
- CSS预处理器 Less Sass,Scss 编译 Sourcemap调试
sass.less和stylus的安装使用和入门实践 SASS用法指南 Sass Basics CSS预处理器 css preprocessor 预处理器即preprocessor,预处 ...
- 最新版chrome浏览器如何离线安装crx插件?(转载)
原文链接:https://newsn.net/say/chrome-crx-offline.html mac新版chrome开启离线插件安装 对于mac新版chrome,注意,大家一定要按照顺序来.m ...
- 使用chrome查看页面元素的css样式
使用chrome查看页面元素的css样式 我们在写页面的时候,可能总是不知道怎么回事,就发现某个元素出现了问题,但是不知道为什么会这样,这时候,就需要使用强大的chrome了!!! 举例说明: 1. ...
- 将less编译成css的gulp插件
简介:gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码, ...
- chromedriver对应的支持的Chrome版本(更新至Chrome63)
很多网友在配置chromedriver的时候会遇到很多麻烦,在网上找了很多资料觉得这个表格不错,就给大家分享出来,希望对大家配置chrome的时候有帮助: chromedriver版本 支持的Chro ...
- chromedriver版本 支持的Chrome版本
在使用selenium测试时,如果选择chrome浏览器,需要将chrome driver的exe文件放在项目下 错误的driver版本,会导致无法正常打开本机的浏览器 以下为对应关系 来自网络 ch ...
随机推荐
- [Java解惑]字符串
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- SQL Server 小技巧【2】
--1.不要使用×来查询所有字段 SELECT * FROM DBO.tb1 --改为 SELECT FName,PWD,CreateDate FROM DBO.tb1 (NOLOCK) --2.查询 ...
- lotusscript基本语法
LotusScript是一种使用于Lotus Notes客户端程序或者是用于Domino服务器程序代理列表中的脚本语言.相当于用于网页中的脚本语言JavaScript.(JavaScript以可以用于 ...
- Thinkphp 3.2 添加 验证码 如何添加。
1,在home模块indexController.class.php中,加入以下代码 <?php namespace Home\Controller; use Think\Controller; ...
- iOS - MVVM 架构模式
1.MVVM 从字面意思来理解,MVVM 即 Modal View ViewModel(模型 视图 视图模型).MVC 是一个用来组织代码的权威范式,也是构建 iOS App 的标准模式.Apple ...
- 使用phpmaill发送邮件的例子
首先,要下载php_mail软件包 核心代码: index.php <?php include "mail.php"; if (!empty($_POST['to']) &a ...
- 新建我的 第一个maven项目
maven是管理项目的,myeclipse是编写代码的.第一次写项目都要配置好多东西,很麻烦,now 来看看怎样新建一个maven项目. 百度经验:jingyan.baidu.com 工具/原料 ...
- Python类、模块、包的区别
类 类的概念在许多语言中出现,很容易理解.它将数据和操作进行封装,以便将来的复用. 模块 模块,在Python可理解为对应于一个文件.在创建了一个脚本文件后,定义了某些函数和变量.你在其他需要这些功能 ...
- 【linux命令】:查看当前登录用户的信息,本文介绍3种方法
作为系统管理员,你可能经常会(在某个时候)需要查看系统中有哪些用户正在活动.有些时候,你甚至需要知道他(她)们正在做什么.本文为我们总结了4种查看系统用户信息(通过编号(ID))的方法. 1. 使用w ...
- 根据出生日期计算年龄的sql各种数据库写法
ORACLE数据库: ) KINGBASE数据库: DB2数据库: TIMESTAMPDIFF(,