Webstorm9配置SASS編譯環境

2022-08-03 14:27:10 字數 1629 閱讀 3877

廢話不多說,直接去webstorm配置去。

開啟settings,可以看到tools下面有個file watchers選項,點進去如下圖

右邊顯示的就是現在監視的實時編譯檔案配置,scss和scss-min就是我配置的。

點選加號,選擇scss或者sass(根據自己寫的格式,scss是最新版的sass字尾),我們這裡選擇是scss,進入配置介面

name和description就不用多介紹了,options我們暫時也不用管(其實是我也不懂啥意思。。。)

file type就是我們需要監視的檔案型別,這裡當然是scss

scope監視範圍可以選擇不同監視範圍,這樣就可以設定多個監視配置,輸出對應不同的目錄或者module下的scss檔案。

安裝好ruby以後,開啟cmd,輸入gem install sass就可以安裝sass了,但是由於gem的預設原位址由於國內偉大的gfw原因可能連線不上導致無法安裝,所以我們還需要替換一下。

依次輸入:

gem sources –r

gem sources –a

gem sources –l

如果我們看到最後顯示的位址只有國內**提供的映象位址就ok了

然後再輸入gem install sass就可以了,完成後輸入sass –v 就會返回sass的版本號。

ok以後,在webstorm裡面選擇本機ruby目錄下bin目錄裡面的scss.bat檔案(如果需要編譯sass檔案則選擇sass.bat)

下面的輸出引數,可以根據自己的需要填寫,下面列出的是一些常用的引數

下面是四種格式編譯後的樣式:

// nested

#main

#main p

.huge

// expanded

#main

#main p

.huge

// compact

#main

#main p

.huge

// compressed

#main#main p.huge

後面就是輸出的目錄位址和檔名,目錄是相對於原始檔的,點選insert macro可以看到一些變數。預設的話是在原始檔下輸出css檔案。

配置完畢後,點選ok就完成了。

然後我們新建個scss檔案,輸入內容就可以看到結果了

可以看到,我輸入內容後,直接在原始檔下生成了乙個css檔案和乙個map檔案。

這樣就代表編譯成功了,現在就可以開始我們編寫我們的sass專案了,就不用在考慮編譯問題了。

webstorm主題配置

自定義語法高亮 用ctrl alt s開啟settings介面,editor colors fonts。不同語言有各自的語法高亮規則,但有一部分是通用的 general 我們首先來設定general,然後再根據需要設定不同語言的語法高亮。general的設定 普通文字 default text 摺疊...

配置SASS環境

安裝sass 安裝好ruby之後,在開始介面會有乙個 start command prompt with ruby的檔案使用管理員身份開啟他 然後輸入命令 gem install sass 這個就是安裝sass了 但是有的時候會出錯那是因為被牆了不能安裝,一些大型 提供了一些映象下面就介紹用映象來安...

工具 webstorm配置git,github

本機環境 win7 webstorm9 按照網上的教程,結果連github都連線不上,報錯 can t login received fatal alert protocol version 查閱了很多資料,將git的tls版本也公升級到tlsv1.2,結果還是連線不上github。最後,實在沒辦法...