webstorm配置編譯sass
阿新 • • 發佈:2018-08-31
pro sas 信息 com 自動 orm 手動 bst paths
1、下載Ruby(選擇RubyInstallers裏面的文件),並安裝。安裝時將3個復選框的 √ ,都 √ 上。安裝成功後,查看版本信息:
ruby -v gem -v
2、安裝sass
怎麽安裝的忘了,gem install sass 網上寫的是這個,不知道對不對。安裝Sass ,安裝完後,在命令行中輸入 sass -v 是否出版本號。然後會在安裝路徑(C:\Ruby23\bin) 中多出如下文件
3、Webstorm裏添加SCSS配置
File → Settings→ Tools→ File Watchers右邊欄綠色的 "+" 選擇 SCSS
Name:名字可以自己改動
Program: 會自動配置路徑位置,不用填寫,也可以自己手動改
Arguments:no-cache --update --sourcemap --watch $FileName$:$FileNameWithoutExtension$.css
Output paths to refresh:$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map
設置好後然後點擊“OK”,
再回到File Watchers右邊欄時,會增加一條Compass SCSS將其選中(前面復選框√上),點擊右下角的Apply,添加成功後,創建SCSS文件,編寫後自動生成css和map文件,就代表成功了
註意:
1.同步編譯只能在當前項目文件夾下,也就是webstorm左側打開的項目.隨便打開一個項目外的文件是不行的.
2.就是sass編譯不能帶有中文,無論是路徑名,文件名,文件裏的內容,都不能識別中文
webstorm配置編譯sass