在webstorm中配置sass的自動編譯，而且能夠指定編譯後的css的目錄.

參考：

WebStorm-2018.2-Help-Sass, Less, and SCSS

 

做者：tobyDing
連接：https://www.jianshu.com/p/0fe52f149cab
來源：簡書

 

本文前提是電腦裏已經順利安裝了ruby,sass等以後，再進行webstorm中配置sass的watcher，以及改變watcher中的默認選項；若是以上都尚未作，能夠自行百度解決，很容易找到的；

webstorm支持sass的同步編譯,也就是即寫即編譯,而且能夠指定編譯後的css的目錄.

本文使用的webstorm爲11.0版本

點擊左上角的File→Settings→File Watchers  

在彈窗的窗口的右上角點擊綠色的 ‘+’ 號,而後選擇scss

而後按照下圖進行操做：

 

Watchers

 

其中黃色的地方都要填好，program那裏是你安裝ruby中響應的scss.bat的路徑，若是安裝ruby時，你不是按照默認c盤路徑按裝的話，那麼那裏是須要需改的；

按道理其中只有兩個地方是須要修改的,其餘我沒有改過,都是默認就是那樣的：

一、Arguments:

能夠配置編譯後的文件的輸出路徑,我這裏寫的是:

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

注意,$FileName$後面有個冒號,而後$FileParentDir$表示的是scss文件所在的文件夾的父級文件夾,而不是scss文件的父文件夾.

舉個例子,個人項目叫lianxi,裏面有個sass文件夾,裏面存放scss文件,那麼按照這樣配置的結果,www.scss所在的文件夾就是sass,sass的父文件夾就是lianxi,而後找到lianxi下的css文件夾,編譯後的www.css文件就會在這裏.

如圖所示：

 

文件結構

 

二、Output paths to refresh:

改爲這樣:$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map

通過以上配置就實現了，webstorm支持sass的同步編譯,也就是即寫即編譯,而且能夠指定編譯後的css的目錄.

這裏須要注意兩點：

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

2》這個和webstorm沒有什麼關係,就是sass編譯不能帶有中文,不管是路徑名,文件名,文件裏的內容,都不能識別中文,若是要修改它也不是不能夠,但我以爲不用中文也挺好的,養成好習慣嘛.

---

因爲本人水平有限，時間倉促，疏漏之處在所不免，望讀者包容！

不喜勿噴！

本文爲UndefinedCheng原創文章，如想轉載，請註明原文網址摘自於http://www.jianshu.com/writer#/notebooks/8901255/notes/8479561，註明出處；

不然，禁止轉載；謝謝配合！

做者：tobyDing 連接：https://www.jianshu.com/p/0fe52f149cab 來源：簡書 簡書著做權歸做者全部，任何形式的轉載都請聯繫做者得到受權並註明出處。