Webstorm 編譯 LESS

一、安裝NodeJs：http://nodejs.org/

二、測試是否安裝成功：cmd->node -v、npm -v檢查版本

三、安裝less：npm install less -g

四、Webstorm內配置LESS編譯

     1.Webstorm->File->Settings->Tools->File Watchers

 (3)Output paths to refresh：可不填，因為開啟lessc.cmd已經設定檔案位置參數。

               (4)Sass配置方法也雷同，「--no-cache --sourcemap $FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css」

五、補充Webstorm中設定File Watchers是當檔案中有任何改變時就去編譯它，有時候我們所修改的地方並非是要進行編譯的檔案，所以提供以下主動去編譯的。

     1.Webstorm->File->Settings->Tools->External Tools->+

     2.設定就像上面一樣

          (1)Name: LESS

          (2)Group: CSS

          (3)Program: C:\Users\myComputer\AppData\Roaming\npm\lessc.cmd

          (4)Parameters: $FileName$ $FileParentDir$\css\$FileNameWithoutExtension$.css --source-map

          (5)Working directory: $FileDir$

     3.編輯狀態時，右鍵CSS->LESS，就可以直接進行編譯。