文档章节

在Webstorm中配置Compass Watcher

小致dad
 小致dad
发布于 2016/12/07 15:39
字数 227
阅读 57
收藏 0

结合Webstorm和Compass,完成自动编译Scss文件为css,做个简单的记录。

1 首先用 webstorm 打开创建的 compass 项目,然后依次选择:

File->Settings->File Watchers

点击右边的加号,选择 Compass SCSS 添加一个 watcher :

2 在Program里面选择 ruby 安装路径的 bin 下面的 compass.bat , Arguments目录填入 compile $UnixSeparators($FilePath$)$ ,Working directory填入 $UnixSeparators($FileParentDir$)$ ,Output paths to refresh留空,保存之后就配置完成了。

默认编译的css文件有注释。生产环境需要压缩后的css文件,需要使用--output-style compressed参数。

Compass只编译发生变动的文件,如果你要重新编译未变动的文件,需要使用--force参数。

我的设置看起来是这样的:

如果你的项目不是在根目录的话, Working directory 配置为 $UnixSeparators($FileParentDir$)$ ,或者就直接把 Working directory 配置为 $UnixSeparators($FileParentDir$)$ 吧。

© 著作权归作者所有

共有 人打赏支持
上一篇: Compass的模块介绍
下一篇: CSS 布局模块
小致dad
粉丝 138
博文 535
码字总数 580132
作品 0
济南
技术主管
私信 提问
WebStorm开启Scss的Source Maps功能

本地安装好SCSS后,用WebStorm工具新建一个'*.scss'文件,就会自动提醒是否'Add watcher',直接点击一下就OK啦;前提是要本机安装了Ruby和SCSS才行; 这样WebStorm就会自动新建一个scss的'wa...

渊翼
2014/06/08
0
2
安装和配置—Webstorm入门指南

WebStrom档案 用途:功能强大的前端专用IDE,拥有即时编辑(chrome)、自动完成、debugger、Zen Coding、HTML5 支持、JSLint、Less支持、CoffeeScript支持、Node.JS、单元测试、集成git和svn...

李长春
2012/11/08
0
2
WebStorm 9正式发布——优越而简单

WebStorm 9带了更多引人注目的新特性。包括支持目前最热门、最强大的开发框架及应用库。并在WebStorm 9集成新的工具和改进性能。这次WebStorm 9正式发布,集合之前测试版的信息,整体给开发者...

kouxunli1
2014/10/31
0
0
WebStorm 2018.2 发布,改进 TypeScript 支持

WebStorm 2018.2 正式版本已发布,更新亮点包括: 检验工具提示 新的检验工具现在不仅会显示错误或警告描述,而且还提示最佳的快速修复方法。 查找未使用的代码 使用新的 Code Coverage 功能...

淡漠悠然
07/26
0
0
WebStorm中Node.js项目配置教程(1)——创建项目

Node.js绝对是一个web开发的热点话题,作为web神器的WebStorm也是开发Node.js的佼佼者。 接下来就Node.js项目在WebStorm的配置操作就行详细的讲解,首先是创建项目。两种方式完成Node.js项目...

kouxunli1
2014/01/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

ViewPager系列之软件主页面切换制作

效果图:ViewPager制作的页面能左右滑动,而Fragment制作的页面却不能左右滑动。 代码: <?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.......

鱼想吃肉
29分钟前
2
0
大话后端开发的奇淫技巧大集合

Hi,大家好,很荣幸有这个机会可以通过写博文的方式,把这些年在后端开发过程中总结沉淀下来的经验和设计思路分享出来 模块化设计 根据业务场景,将业务抽离成独立模块,对外通过接口提供服务...

James-
30分钟前
1
0
函数

1、函数的定义:从function关键字开始,后面跟随{ (1)函数名字 (2)圆括号 (3)花括号 } function arr() {}

墨冥
31分钟前
1
0
ZABBIX 3.4 (一) 监测Nginx状态及脚本

ZABBIX 3.4 (一) 监测Nginx状态及脚本 2018年08月31日 16:56:48 YoFog 阅读数:106 标签: zabbix agentzabbix nginxnginx_status监控nginxzabbix脚本更多 个人分类: 运维 版权声明:本文...

linjin200
32分钟前
3
0
Spring 之 IOC 初始化总结

IOC 容器的初始化过程分为三步骤: Resource 定位 BeanDefinition 的载入和解析 BeanDefinition 注册 Resource 定位。我们一般用外部资源来描述 Bean 对象,所以在初始化 IOC 容器的第一步就...

专业搬砖工程师
34分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部