WebStorm2017.1配置sass编译器方式

因为想做一个sass预编译样式的项目，所以开始寻找sass文件的file watch配置方式
在网上搜到的基本都是先安装ruby之后安装sass的方式
但经过几次尝试发现大部分都存在一些问题，也可能是因为时间过了比较久，很多镜像都迁移了
/*********↓↓配置方式部分↓↓**********/

1. 安装ruby，方式有很多，可以从百度搜索或进入http://www.ruby-lang.org/zh_tw/documentation/installation/选择所需要的安装包
2. 安装过程中记得勾选 Add Ruby executables to your PATH选项

3. 打开小黑框（win+r==>cmd）输入ruby -v 会出现如下显示则表示安装成功，
   

4. 因为网络环境的问题，从gem原有的路径下载sass很困难，在网上找到的很多方法中推荐通过淘宝镜像安装sass，但现在淘宝镜像已经迁移到了ruby-china.org所以我们先要更改gem的sources
   在命令行输入 gem sources -a http://gems.ruby-china.org/
   将镜像下载地址更改，
   
   如果成功更改会出现如上图显示

5. 命令行输入 gem install sass 安装sass
   安装成功后会显示sass版本等信息
   安装完成后命令行输入 sass -v
   
   显示如上图所示，现在sass已经安装完毕

6. 下面开始配置webstorm的file watch
   File–>Setting–>Tools–>File Watchers
   点击添加（+），选择sass监视器
   配置如下图
   
   Program中选择ruby安装路径下的bin文件夹下的sass.cmd文件
   同文件夹下还有scss.cmd请勿选错
   Output paths to refresh中内容为

$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map

（ $FileNameWithoutExtension$.css.map的作用为生成.map文件，通常用于压缩后浏览器显示样式在源文件中的具体信息，如不需要.map文件删除即可）
Other Options 中不要勾选 Create output file stdout选项
之后点击确定即可
webstorm会自动生成.map文件和.css文件
效果如下

sass配置到此完成…
/****↑↑配置方式部分↑↑*****/
这个配置方法只是本人自己参考网上的方法尝试出来的，又不合理的地方还请各位大神指正