IntelliJ IDEA：使用Stylus

Stylus

此功能僅在Ultimate版本中受支持。

在開(kāi)始之前，請(qǐng)確保您的計(jì)算機(jī)上有Node.js。

IntelliJ IDEA允許您動(dòng)態(tài)地將Stylus代碼轉(zhuǎn)換為CSS。

提示：您也可以在Node.js和NPM頁(yè)面上安裝Stylus軟件包。

安裝Stylus

• 打開(kāi)嵌入式終端（Alt+F12）并在命令提示符下鍵入npm install --global stylus以進(jìn)行全局安裝。從Stylus官方網(wǎng)站了解更多信息。

編譯Stylus代碼

要?jiǎng)討B(tài)編譯代碼，需要將編譯器配置為IntelliJ IDEA文件監(jiān)視器。

創(chuàng)建文件監(jiān)視器

1. 在“設(shè)置/首選項(xiàng)”對(duì)話(huà)框（Ctrl+Alt+S）中，單擊“工具”下的“文件監(jiān)視器”。打開(kāi)的“文件監(jiān)視器”頁(yè)面顯示已配置的文件監(jiān)視器列表。

2. 單擊或按下Alt+Insert，然后從列表中選擇Stylus預(yù)定義模板。

3. 按照使用文件監(jiān)視器中的說(shuō)明繼續(xù)操作。

編譯代碼

當(dāng)您打開(kāi)文件時(shí)，IntelliJ IDEA會(huì)檢查當(dāng)前項(xiàng)目中是否有適用的文件觀(guān)察器。如果配置但禁用了此類(lèi)文件觀(guān)察器，IntelliJ IDEA將顯示一個(gè)彈出窗口，通知您已配置的文件觀(guān)察器并建議啟用它。

如果在當(dāng)前項(xiàng)目中配置并啟用了適用的文件觀(guān)察器，則IntelliJ IDEA會(huì)在“新建觀(guān)察器”對(duì)話(huà)框中指定的事件時(shí)自動(dòng)啟動(dòng)它。

• 如果選中“自動(dòng)保存已編輯的文件以觸發(fā)觀(guān)察器”復(fù)選框，則只要對(duì)源代碼進(jìn)行任何更改，就會(huì)調(diào)用“文件觀(guān)察器”。
• 如果“自動(dòng)保存已編輯的文件以觸發(fā)觀(guān)察器”復(fù)選框被清除，文件觀(guān)察器是在保存（文件|全部保存，Ctrl+S），或者當(dāng)你從IntelliJ IDEA移動(dòng)對(duì)焦（幀停用時(shí)）啟動(dòng)。

IntelliJ IDEA使用生成的輸出創(chuàng)建單獨(dú)的文件。該文件具有源Stylus文件的名稱(chēng)和擴(kuò)展名css。生成的文件的位置在“新建觀(guān)察器”對(duì)話(huà)框的“要刷新的輸出路徑”文本框中定義。但是，在項(xiàng)目樹(shù)中，它們顯示在源文件下，該文件現(xiàn)在顯示為節(jié)點(diǎn)。