Sass安裝與Webstorm File Watcher配置

一、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

　　

　　在命令行中輸入

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 insall sass

　　安裝Sass

二、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。