Webstorm 10 自動編譯 LESS（windows環境）

標籤：

0. 安裝 NodeJS + LESS

登陸 NodeJS 官網，下載對應版本安裝。
WIN鍵 + R 開啟 CMD 視窗，輸入

node -v 
npm -v

能夠回顯版本號碼就證明安裝成功了
輸入 npm 並斷行符號，進入 npm 模式，執行

npm install less -g

 安裝 LESS，這裡容易撞牆，卡住了就掛個梯子。

1. 設定下windows檔案夾選項，讓系統顯示隱藏檔案。

2. 添加 File Watcher

開啟 Webstorm ，依次展開菜單 File –> Setting –> Tools –> File Watchers
點擊右側加號添加一個新的 File Watcher（或者直接在 Project 目錄裡建立一個.less檔案，用Webstorm開啟時會自動提示建立 File Watcher）。
設定2， 添加完成後 Webstorm 就可以自動編譯 LESS 檔案了。

圖1. 添加File Watcher

圖2. 參數設定

Program:  C:\Users\yourname\AppData\Roaming\npm\lessc.cmdArguments:  –no-color $FileName$Working directory:  $FileDir$Output paths to refresh:  $FileNameWithoutExtension$.css

 

Webstorm 10 自動編譯 LESS（windows環境）