webStorm 配置sass ,安裝ruby 及實現編譯scss文件

1、首先從 官網下載ruby

 

2、安裝 過程中

 

安裝成功后，查看版本信息

ruby -v
gem -v

 

 

3、 安裝Sass ，安裝完后，會在 C:\Ruby23\bin   多出如下文件

gem install sass

 

 

4、Webstorm里添加Watcher 

工具欄--File ---打開Settings下的 -----Tools ---【File Watchers】右邊欄的  "+"  選擇  SCSS

 

 

Program: 

               C:\Ruby23\bin\scss.bat

Arguments

             --no-cache --update --sourcemap --watch $FileName$:$FileNameWithoutExtension$.css

 

Output paths to refresh

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

 

Environment variables

              C:/Ruby23/bin

 

 

ps、 注意，如果文件路徑有修改如：

未修改：       C:\Ruby23-x64\bin 

修改后：       C:\Ruby23\bin 

這幾個地方要統一：

之前是 Ruby23-x64 ------>改后：  Ruby23

環境變量也需要改動。。。。。。。。。。。所以。。最好使用默認名稱。

編譯后前后CSS