1. 程式人生 > >關於webStorm設定less自動編譯css和sourcemap問題

關於webStorm設定less自動編譯css和sourcemap問題

前兩天專案頁面迭代版本,接手同事的頁面(據說是經了三人的手...),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