輕鬆學習Ionic （三） 安裝sass並在webstorm中爲scss添加watcher

1. 安裝Ruby 最新爲 2.1.5版本，不放心的話安裝 Ruby 1.9.3-p551

   安裝過程當中注意勾選上第二項！即將Ruby加入到可執行的環境變量中去。

 

    安裝結束後在命令行中運行 ruby -v 能看到對應的版本則說明安裝正確。

 

 

2.經過Ruby安裝Sass

    啓動Ruby中的「Start Command Prompt with Ruby」

    在命令行中輸入：

gem sources --remove https://rubygems.org/
gem source -a http://ruby.taobao.org
gem install sass

由於GFW的緣故，特將淘寶的Ruby鏡像添加進來，安裝Sass。

安裝結束後在命令行中運行 sass -v 能看到對應的版本則說明安裝正確。

 

3.啓動WebStorm，打開已有項目，建立一個scss文件。

    這是在右上角會顯示Add Watcher按鈕，點擊它，在彈出的對話框中，將Program的路徑設爲Ruby中scss.bat的路徑。

 

 

    也能夠修改css的輸出路徑等等。

 

    主要步驟已經完成，如今在咱們修改scss文件的時候，webstorm會爲咱們自動生成對應的css文件，別忘記在html中引入這個css文件。

 

    測試修改ionic的主題顏色，在以前建立的scss文件中添加如下內容並運行。

$positive: #00FF00;

@import "../lib/ionic/scss/ionic";

    就會發現以前使用藍色positive的內容所有變成了綠色。