前兩天專案頁面迭代版本，接手同事的頁面（據說是經了三人的手...），css中內容已經慘不忍睹，忍著痛苦算是完成了css效果。痛定思痛，以後寫程式碼一定要用less，維護起來不會這麼慘。問一個朋友，他是用考拉進行自動編譯，本人比較懶，不想使用那麼多工具，於是百度了一下關於webStorm的自動編譯less檔案，還真有，但是在less檔案下建立的css和map，於是又查閱怎麼能建立到根目錄下的css資料夾中，經過個人測試修改，把webStorm配置記錄一下，以備以後忘了。

1.設定Chrome瀏覽器的開發者模式，網上說是在Setting-General下，找了半天也沒找到General這貨（我嚴重懷疑自己電腦有問題，PS功能報錯，Chrome也各種不好用），結果在F12-右上角

2. npm install less -g 全域性安裝less。由於我是以前安裝的，這次忽略了這個步驟，參考別的資料才發現有這麼一步。

3. 配置 webStorm ：File-setting-Tools-File Watchers-右上角新增Less的設定。如圖：

----

回彈出這個視窗，Program開啟就是這個路徑，我猜應該是自動匹配的到lessc命令，如果不是，那就手動配置一下吧；主要是Arguments和Output paths to refresh，

Arguments：--no-color --source-map=$FileParentDir$/css/$FileNameWithoutExtension$.css.map $FileName$

Output paths to refresh：$FileParentDir$\css\$FileNameWithoutExtension$.css: $FileParentDir$\css\$FileNameWithoutExtension$.css.map

儲存，然後建立一個Less資料夾，寫一個less檔案，自動生成了css資料夾及對應css和map。

最後，複製要給別人的sass配置，等以後需要sass的時候再試試能用不~

sass的配置方法也是一樣,它生成css和map的命令列引數如下：
sass bootstrap.scss:../css/bootstrap.css --sourcemap --no-cache

在Arguments 中的引數如下

--no-cache --sourcemap $FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css