为WebStorm设置SASS的File Watchers

下面就是在WebStorm设置SASS的File Watchers的步骤(限window系统)：

1. 安装Ruby

http://www.rubyinstaller.org/，去这里下载，然后安装（只管点击next即可）。安装过程中注意勾选上第二项！即将Ruby加入到可执行的环境变量中去，第一个选项可以不用选。

安装结束后在命令行中运行 ruby -v 能看到对应的版本则说明安装正确。

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
如果我们看到最后显示的地址只有国内淘宝提供的镜像地址就OK了
请确保只有 ruby.taobao.org
$ gem install sass

完成后输入sass –v 就会返回sass的版本号。

OK以后，在webstorm里面选择本机ruby目录下bin目录里面的scss.bat文件（如果需要编译SASS文件则选择sass.bat）

3. 设置Webstorm

上面都安装没问题以后，就可以设置Webstorm了。

下面的输出参数，可以根据自己的需要填写，下面列出的是一些常用的参数

• style表示解析后的css是什么格式，如：–style compressed，有四种取值分别为：nested，expanded，compact，compressed.

• sourcemap表示开启sourcemap调试。开启sourcemap调试后，会生成一个后缀名为.css.map文件。 webstorm是默认开启sourcemap的，所以可以不填写

• debug-info表示开启debug信息，升级到3.3.0之后因为sourcemap更高级，这个debug-info就不太用了。

根据如下路径打开 WebStrom 的配置：

File > Settings > Tools > File Watchers

选择右边的 + 号，在弹出界面点击你想要添加的 Watcher， Sass 或是 Scss，我现在使用的是 Scss 。

Arguments 中的配置信息如下：

–no-cache –update $FileName$:$FileNameWithoutExtension$.css –style expanded