webstorm支援sass的同步編譯,也就是即寫即編譯,並且可以指定編譯後的css的目錄.
本文使用的webstorm為8.0版本
scss安裝:
開啟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編譯不能帶有中文,無論是路徑名,檔名,檔案裡的內容,都不能識別中文,如果要修改它也不是不可以,但我覺得不用中文也挺好的,養成好習慣嘛.
webstorm配置scss的小結
1 安裝ruby 2 安裝sass 3 配置webstorm 開啟webstrom file setting tools file watcher 新增scss program c ruby22 x64 bin scss.bat arguments 預設的是在scss目錄中生成css,如果要改變路徑...
webstorm主題配置
自定義語法高亮 用ctrl alt s開啟settings介面,editor colors fonts。不同語言有各自的語法高亮規則,但有一部分是通用的 general 我們首先來設定general,然後再根據需要設定不同語言的語法高亮。general的設定 普通文字 default text 摺疊...
工具 webstorm配置git,github
本機環境 win7 webstorm9 按照網上的教程,結果連github都連線不上,報錯 can t login received fatal alert protocol version 查閱了很多資料,將git的tls版本也公升級到tlsv1.2,結果還是連線不上github。最後,實在沒辦法...