webstorm設置sass自動編譯,及參數配置

• 網上有很很多webstorm配置sass的教程，不過我覺得這篇最好

• 轉載自：http://blog.csdn.net/wytbr666/article/details/77477182

• 
  

• 安裝Ruby:https://rubyinstaller.org/downloads/ 

• 安裝成功後，用命令進行檢查，成功會顯示版本信息

ruby -v
gem -v

• 1
• 2

• 安裝sass

在命令行輸入：

gem install sass

• 1

• 安裝成功後，在D:\Ruby23-x64\bin裏面會有scss.bat的文件

• 在webstorm中添加Watcher

• File -> Settings -> Tools -> File Watchers -> + -> SCSS

1、Arguments:配置編譯後的文件的輸出路徑:

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

• 1

2、Output paths to refresh:

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

• 1

3、Program:

• 同步編譯只能在項目文件夾下,也就是webstorm左側打開的項目.隨便打開一個項目外的文件是不行的

• 不能帶有中文，無論是路徑名,文件名,文件裏的內容,都不能識別中文,如果非要在文件中加入中文,可以試試在sass文件開頭加入 @charset ‘UTF-8’;

• 參數設置

• 參數值裏，-t 後面可以配置的值