webstorm配置scss自動編譯路徑

2022-02-14 04:44:23 字數 1046 閱讀 2618

webstorm支援sass的同步編譯,也就是即寫即編譯,並且可以指定編譯後的css的目錄.

本文使用的webstorm為8.0版本

scss安裝:

開啟webstorm:

點選左上角的filesettingsfile 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。最後,實在沒辦法...