webstorm支持sass的同步編譯,也就是即寫即編譯,並且可以指定編譯后的css的目錄.
本文使用的webstorm為8.0版本
scss安裝：http://www.w3cplus.com/sassguide/install.html
打開webstorm：
點擊左上角的File→Settings→File Watchers
在彈窗的窗口的右上角點擊綠色的 ‘+’ 號,然后選擇scss
-------------------------------------------------------------------------------
Arguments:
可以配置編譯后的文件的輸出路徑,我這里寫的是:
--no-cache --update --sourcemap --watch $FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css
注意, $FileName$后面有個冒號,然后$FileParentDir$表示的是scss文件所在的文件夾的父級文件夾,而不是scss文件的父文件夾.
舉個栗子,我的項目叫sass-learn,里面有個scss文件夾,里面存放scss文件,那么按照這樣配置的結果,style.scss所在的文件夾就是scss,scss的父文件夾就是sass-learn,然后找到sass-learn下的css文件夾,編譯后的style.css文件就會在這里.
---------------------------------------------------------------------------------
Output paths to refresh:
改成這樣:$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map
在使用的過程中還有兩點需要注意:
1.同步編譯只能在項目文件夾下,也就是webstorm左側打開的項目.隨便打開一個項目外的文件是不行的.
2.這個和webstorm沒有什么關系,就是sass編譯不能帶有中文,無論是路徑名,文件名,文件里的內容,都不能識別中文,如果要修改它也不是不可以,但我覺得不用中文也挺好的,養成好習慣嘛.