導(dǎo)言：由于前端開發(fā)中經(jīng)常用到less/sass/scss，來代替css實現(xiàn)高效率開發(fā)，那么他們的編譯環(huán)境及編譯路徑也就成了我近期關(guān)注的重點。然而，網(wǎng)上關(guān)于此類的文章少之又少（除了使用webpack/gulp等預(yù)處理工具）幽邓，所及小編就花了一些時間研究了一下webstorm中l(wèi)ess文件的編譯輸出路徑，供大家參考火脉。
小編用的是webstorm 2017.1.4版本牵舵，低版本的試過不行
- 在webstorm中安裝less環(huán)境
首安裝webstorm編輯器，然后去node的主頁下載對應(yīng)版本的nodejs然后安裝下載地址：http://nodejs.org/ 根據(jù)自己的系統(tǒng)選擇合適的版本下載倦挂。安裝完成之后打開命令提示符（win+r）,分別輸入node -v以及npm -v如果返回版本號說明你安裝成功了畸颅。
- 接下來就可以安裝less了
在“命令提示符”下運行命令“npm install less -g”，然后npm就自動開始下載并安裝LESS方援。 -
配置webstorm（版本10）没炒，點擊“file”> "settings……" 彈出設(shè)置界面，在左側(cè)導(dǎo)航找到“tool">"file Watchers" 點擊“+”號按鈕找到less文件選項點擊添加犯戏。
-
配置less：雙擊less彈出 設(shè)置頁面如下圖送火，設(shè)置less的工作目錄。
- Arguments：--no-color $FileName$
-
Output paths to refresh：$ProjectFileDir$\css$FileDirPathFromParent(less)$$FileNameWithoutExtension$.css
最后完美實現(xiàn)想要的項目結(jié)構(gòu)如下圖：
