webstorm配置編譯sass

 

1、下載Ruby（選擇RubyInstallers里面的文件），並安裝。安裝時將3個復選框的 √ ，都 √ 上。安裝成功后，查看版本信息：

ruby -v
gem -v

2、安裝sass

 怎么安裝的忘了，gem install sass  網上寫的是這個，不知道對不對。安裝Sass ，安裝完后，在命令行中輸入 sass -v 是否出版本號。然后會在安裝路徑(C:\Ruby23\bin) 中多出如下文件

3、Webstorm里添加SCSS配置 

File → Settings→ Tools→ File Watchers右邊欄綠色的  "+"  選擇  SCSS

 

Name:名字可以自己改動

Program: 會自動配置路徑位置，不用填寫，也可以自己手動改

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

Output paths to refresh：$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map

設置好后然后點擊“OK”，

再回到File Watchers右邊欄時，會增加一條Compass SCSS將其選中（前面復選框√上），點擊右下角的Apply，添加成功后，創建SCSS文件，編寫后自動生成css和map文件，就代表成功了

 

注意:

1.同步編譯只能在當前項目文件夾下,也就是webstorm左側打開的項目.隨便打開一個項目外的文件是不行的.
2.就是sass編譯不能帶有中文,無論是路徑名,文件名,文件里的內容,都不能識別中文