WebStorm、PHPStorm、IntelliJ IDEA配置scss自動編譯

1、安裝rubu環境

本文轉自:https://www.edik.cn/article/61.html

1.下載ruby

由於sass依賴於ruby

下載地址：http://rubyinstaller.org/downloads

選擇本身對應的操做系統下載

2.安裝ruby

第二步的時候注意勾選第二項，是添加環境變量，後邊都選擇默認便可安裝完畢。

2、安裝sass

1.找到ruby命令行

從開始菜單中找到剛安裝的ruby，點擊Start Command Prompt with Ruby，打開命令行

2.安裝sass

在命令行中輸入如下命令，並回車

gem install sass

稍等片刻便會提示安裝成功。若是不成功說明被牆了，請自行解決，反正個人正常安裝了。

至此，準備工做完畢！

3、配置IDE

1.打開設置

打開IDE，依次打開File→Settings→File Watchers

注：IntelliJ IDEA中沒有自帶File Watchers插件，須要自行從插件中心下載（這個應該都會，實在有不會的請留言）

2.添加配置

點擊右上角的綠色 「+」 號，並選擇scss，如圖

3.選擇安裝的sass

如圖所示是sass的默認安裝路徑

4.編輯輸出路徑

個人設置是在當前路徑下生成css，附上配置

--no-cache --update $FileName$:$FileNameWithoutExtension$.css

5.完成設置

點擊OK完成配置

 

使用注意

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

 

2.目錄名或文件名不要帶中文