“LESS CSS Compiler”JetBrains公司官方提供的外掛，主要功能就是監測Less檔案目錄，當目錄中的Less檔案修改並儲存，該外掛會自動將Less檔案編譯成CSS檔案，並複製到相關聯的CSS目錄去。

1、下載和安裝

（1）給出下載地址（https://plugins.jetbrains.com/plugin/7059-less-css-compiler）（圖1）。

圖1：LESS CSS Compiler的下載頁

（2）下載完的安裝包名稱為“lessc-plugin.zip” （圖2）。

圖2：下載的安裝包

（3） 開啟“WebStorm”，按“File >> Settings >> Plugins”進入外掛安裝介面，通過“Install plugin from disk…”按鈕，選擇下載的安裝包進行安裝（圖3）。

圖3：從磁碟安裝外掛

（4） 安裝完成後，重新啟動“WebStorm”（圖4）。

圖4：重新啟動WebStorm

（5） 經過以上幾個步驟，“LESS CSS Compiler”外掛的下載和安裝就完成了。

2、使用簡介

（6） 安裝成功後，再次進入“WebStorm”,在“File >> Settings >> Other Settings”中就可以看到新增了“LESS Profiles”設定介面（圖5）。

圖5：進入“LESS Profiles”設定介面

（7） 在圖6中點選“綠色+號”可以新增一個Less的配置，先給該配置起個名稱，這裡我們起名為“helloLess”（圖6），然後點選“OK”按鈕。

圖6：給Less配置起個名稱

（8） 進入Less編譯外掛的設定介面後，選擇Less原始檔所在路徑和編譯後CSS檔案的存放路徑，我這裡分別為“D:\HelloWorld\less”和“D:\HelloWorld\css”（圖7），讀者根據自己的檔案位置設定即可，設定完成後點選“OK”按鈕儲存設定。

圖7：外掛設定

（9） 在專案中，我們對less目錄下的“style.less”檔案進行修改並儲存（圖8標記1），提示CSS編譯成功（圖8標記2）。

圖8：修改並儲存less檔案

（10） 在“css”目錄中，就會生成一個對應的css檔案，這裡為“styles.css”（圖9）。

圖9：自動生成對應的css檔案