本文前提是電腦里已經(jīng)順利安裝了ruby,sass等之后，再進行webstorm中配置sass的watcher，以及改變watcher中的默認選項；如果以上都還沒有做，可以自行百度解決，很容易找到的；
webstorm支持sass的同步編譯,也就是即寫即編譯,并且可以指定編譯后的css的目錄.
本文使用的webstorm為11.0版本
點擊左上角的File→Settings→File Watchers ?
在彈窗的窗口的右上角點擊綠色的 ‘+’ 號,然后選擇scss
然后按照下圖進行操作：
其中黃色的地方都要填好，program那里是你安裝ruby中響應(yīng)的scss.bat的路徑，如果安裝ruby時，你不是按照默認c盤路徑按裝的話，那么那里是需要需改的；
按道理其中只有兩個地方是需要修改的,其他我沒有改過,都是默認就是那樣的：
1、Arguments:
可以配置編譯后的文件的輸出路徑,我這里寫的是:
--no-cache --update --sourcemap --watch $FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css
注意,$FileName$后面有個冒號,然后$FileParentDir$表示的是scss文件所在的文件夾的父級文件夾,而不是scss文件的父文件夾.
舉個例子,我的項目叫l(wèi)ianxi,里面有個sass文件夾,里面存放scss文件,那么按照這樣配置的結(jié)果,www.scss所在的文件夾就是sass,sass的父文件夾就是lianxi,然后找到lianxi下的css文件夾,編譯后的www.css文件就會在這里.
如圖所示：
2、Output paths to refresh:
改成這樣:$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map
經(jīng)過以上配置就實現(xiàn)了，webstorm支持sass的同步編譯,也就是即寫即編譯,并且可以指定編譯后的css的目錄.
這里需要注意兩點：
1》同步編譯只能在項目文件夾下,也就是webstorm左側(cè)打開的項目.隨便打開一個項目外的文件是不行的.
2》這個和webstorm沒有什么關(guān)系,就是sass編譯不能帶有中文,無論是路徑名,文件名,文件里的內(nèi)容,都不能識別中文,如果要修改它也不是不可以,但我覺得不用中文也挺好的,養(yǎng)成好習(xí)慣嘛.
由于本人水平有限，時間倉促，疏漏之處在所難免，望讀者包容！
不喜勿噴！
本文為UndefinedCheng原創(chuàng)文章，如想轉(zhuǎn)載，請注明原文網(wǎng)址摘自于http://www.lxweimin.com/writer#/notebooks/8901255/notes/8479561，注明出處；
否則，禁止轉(zhuǎn)載；謝謝配合！
