phpstorm配置File Watcher在windows下自動編譯sass檔案

標籤：

最近剛接觸sass這個css前置處理器，其在windows上需要先安裝Ruby運行環境。裝好Ruby和sass後，發現如果要將.sass檔案轉成css的話，還需要在控制台中輸入命令，比較麻煩。

由於我自己用的IDE是phpstorm，所以去其官網翻了下，可以用裡面的File Watchers來實現自動轉換.sass->.css檔案。

其實當你建立一個.sass檔案的時候，phpstorm也會提示是否配置File Watchers。

配置步驟

以windows環境的phpstorm 7.1.3為例：

1.開啟設定介面

用phpstorm開啟某個項目後，按CTRL+ALT+S（預設快速鍵）會出現File Watchers配置頁面。

2.建立配置

點擊右面的加號，在裡面選擇SASS後會出現配置頁面。

因為我們配置的是SASS，所以將Program項裡面填上sass.bat的路徑。如果是用Ruby的gem安裝的話，他會在Ruby目錄下的bin檔案夾裡面。

3.填寫環境變數

由於sass.bat的運行需要Ruby的命令列環境，所以在的Environment variables裡面還需要增加運行Ruby的環境變數。

比如我這裡的設定是：

4.測試

配置好後建立一個.sass檔案，做的任何改動都會自動幫你編譯成.css檔案，如果不指定output路徑的話，css檔案預設就在sass檔案下面。

phpstorm配置File Watcher在windows下自動編譯sass檔案