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