前端集合 - 关注前端技术和互联网免费资源

关注前端技术和互联网免费资源

分类儿

页面儿

搜索儿

订阅儿

前端集合 RSS订阅
Home » 前端集合 » 如何为WebStorm设置SASS的File Watchers?

如何为WebStorm设置SASS的File Watchers?

发布者:前端集合 // 发布时间:2014-09-18 21:14:00 // 分类:前端集合 // 访问: 22,899 次 // 热度: 0人参与

Webstorm是一个很牛叉的IDE,现在工作每天都是用它了。

最近开始用SASS,LESS等来写CSS,而在Webstorm中,它自带一个File Watchers功能,设置一下,即可实时编译SASS,LESS等。

LESS的实时编译很简单,在node平台安装一下即可。

而在折腾SASS在Webstorm上的实时编译时,花了我一点时间。因为按照网上的教程设置都不成功,最后自己把设置改来改去终于折腾好了。

下面就是在WebStorm设置SASS的File Watchers的步骤:

1. 安装Ruby

http://www.rubyinstaller.org/,去这里下载,然后安装。

2. 安装Sass

安装好Ruby后,打开CMD命令,输入:

gem install sass

注意:

这里有可能安装没反应或提示网络错误什么的。解决办法是使用淘宝的Ruby gem镜像:

$ gem sources --remove https://rubygems.org/
$ gem sources -a https://ruby.taobao.org/
$ gem sources -l
*** CURRENT SOURCES ***
https://ruby.taobao.org
# 请确保只有 ruby.taobao.org
$ gem install sass

3. 上面都安装没问题以后,就可以设置Webstorm或PHPStorm了

注意:

如何为WebStorm设置SASS的File Watchers?

Tags: WebStorm, phpstorm, sass, scss, file watchers

10大Google Font流行字体,你值得拥有>>  << 如何利用Grunt单独压缩各个JS和CSS文件,并生成对应的Source Map
Top