2014年11月30日 星期日

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,就可以直接進行編譯。

沒有留言:

張貼留言