webstorm如何設定編譯sass? (詳細過程)

不言
發布: 2018-09-26 16:24:54
原創
5645 人瀏覽過

 這篇文章帶給大家的內容是關於webstorm如何設定編譯sass? (詳細過程),有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

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? (詳細過程)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!