Sass安装与Webstorm File Watcher配置

1、Sass安装

• ruby安装

　　mac系统默认安装了ruby，能够直接跳过此步骤，linux和windows须要安装ruby环境。

　　windows安装ruby环境：

　　到ruby官网下载本身系统适用的版本（我下的是2.1.7（x64））

　　安装ruby，此步骤只需留意勾选Add Ruby executables to your PATH这个选项，它将添加环境变量，否则之后使用编译软件的时候会提示找不到ruby环境，影响Webstorm 自动编译。

　　

• Sass安装（淘宝RubyGems镜像）

　　在开始菜单找到Start Command Prompt with Ruby

　　

　　在命令行中输入

1 gem sources --remove https://rubygems.org/

　　移出原有的源，

1 gem sources -a https://ruby.taobao.org/

　　添加淘宝镜像源

1 gem sources -l

　　查看当前的源

　　*** CURRENT SOURCES ***
　　https://ruby.taobao.org
　　务必请确保只有 ruby.taobao.org

1 gem insall sass

　　安装Sass

2、Webstorm File Watcher配置（sass、scss文件自动编译）

　　打开webstorm设置页面

　　windows下 File -> Settings， os x下 Webstorm -> Preferences

　　在配置窗口，找到Tools -> File Watchers

　　

　　点击右侧加号选择SCSS（或SASS）进行添加

　　配置以下：

　　

　　通常状况下，只须要修改Arguments和Output paths to refresh

　　Arguments:

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

　　Output paths to refresh:

　　$ProjectFileDir$/css/$FileNameWithoutExtension$.css

　　根据本身工程结构进行修改。

 

　　至此，Sass安装和Webstorm File Watcher配置（sass、scss文件自动编译）便完成了。在webstorm下编写scss可自动编译成css。