導言：由于前端開發中經常用到less/sass/scss，來代替css實現高效率開發，那么他們的編譯環境及編譯路徑也就成了我近期關注的重點。然而，網上關于此類的文章少之又少（除了使用webpack/gulp等預處理工具），所及小編就花了一些時間研究了一下webstorm中less文件的編譯輸出路徑，供大家參考。

小編用的是webstorm 2017.1.4版本，低版本的試過不行

• 在webstorm中安裝less環境
  首安裝webstorm編輯器，然后去node的主頁下載對應版本的nodejs然后安裝下載地址：http://nodejs.org/ 根據自己的系統選擇合適的版本下載。安裝完成之后打開命令提示符（win+r）,分別輸入node -v以及npm -v如果返回版本號說明你安裝成功了。
  
• 接下來就可以安裝less了
  在“命令提示符”下運行命令“npm install less -g”，然后npm就自動開始下載并安裝LESS。

• 配置webstorm（版本10），點擊“file”> "settings……" 彈出設置界面，在左側導航找到“tool">"file Watchers" 點擊“+”號按鈕找到less文件選項點擊添加。

  
  
  
  

• 配置less：雙擊less彈出 設置頁面如下圖，設置less的工作目錄。

  
  
• Arguments：--no-color $FileName$

• Output paths to refresh：$ProjectFileDir$\css$FileDirPathFromParent(less)$$FileNameWithoutExtension$.css
  最后完美實現想要的項目結構如下圖：