IntelliJ IDEA：使用Sass，Less和SCSS

Sass，Less和SCSS

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

IntelliJ IDEA與將Sass，Less和SCSS代碼轉(zhuǎn)換為CSS的編譯器集成。要在IntelliJ IDEA中使用編譯器，您需要將其配置為文件監(jiān)視器。對于每個受支持的編譯器，IntelliJ IDEA提供預定義的文件監(jiān)視器模板。要在項目中運行編譯器，請根據(jù)相關模板創(chuàng)建特定于項目的文件監(jiān)視器。

在開始之前

1. 下載并安裝Node.js。

2. 如“管理插件”中所述， 在“插件”頁面上安裝并啟用“文件監(jiān)視器”存儲庫插件 。

安裝Sass / SCSS

• 打開嵌入式終端（Alt+F12），然后在命令提示符下鍵入：npm install -g sass 以進行全局安裝。

安裝Less

• 打開嵌入式終端（Alt+F12）并在命令提示符下鍵入：npm install --global less 以進行全局安裝。

將代碼編譯為CSS

要動態(tài)編譯代碼，需要將編譯器配置為IntelliJ IDEA文件監(jiān)視器。

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

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

2. 單擊或按下Alt+Insert。根據(jù)您要使用的工具，從列表中選擇Less，Sass或SCSS預定義模板。

3. 在“程序”文本框中，根據(jù)所選的預定義模板指定編譯器可執(zhí)行文件或存檔的路徑。

   • 對于Less：lessc.cmd。

   • 對于Sass / SCSS：sass.cmd。

   如果您使用npm遵循標準安裝過程，IntelliJ IDEA將自動查找所需文件并自動填寫該字段。否則，請手動鍵入路徑，或單擊并在打開的對話框中選擇文件位置。 

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

編譯代碼

當您打開文件時，IntelliJ IDEA會檢查當前項目中是否有適用的文件觀察程序。如果配置但禁用了此類文件觀察程序，IntelliJ IDEA將顯示一個彈出窗口，通知您已配置的文件觀察程序并建議啟用它。

如果在當前項目中配置并啟用了適用的文件觀察程序，則IntelliJ IDEA會在“新建觀察器”對話框中指定的事件時自動啟動它。

• 如果選中“自動保存已編輯的文件以觸發(fā)觀察器”復選框，則只要對源代碼進行任何更改，就會調(diào)用“文件觀察器”。
• 如果清除了自動保存用于觸發(fā)觀察器的已編輯文件復選框，則會在保存（文件|全部保存，Ctrl+S），或者從IntelliJ IDEA移動焦點時啟動文件觀察器（在幀停用時）。

IntelliJ IDEA使用生成的輸出創(chuàng)建單獨的文件。該文件具有源Sass，Less或SCSS文件的名稱以及擴展名css。生成的文件的位置在“新建觀察器”對話框的“要刷新的輸出路徑”文本框中定義。但是，在項目樹中，它們顯示在源文件下，該文件現(xiàn)在顯示為節(jié)點。