WebStorm 9 自動編譯 LESS 產出 CSS 和 source maps


1、雙擊桌面Chrome圖標,打開Chrome,按鍵盤“F12”鍵,打開開發工具界面,點擊其右上角的“設置”按鈕,勾選“Enable JavaScript source maps”  及“Enable CSS source maps”。

 

2、打開WebStorm,點File-->Settings,找到File Watchers,點右側的“+”,選擇LESS,更改對應項的設置如下:

Program:C:\Users\wind\AppData\Roaming\npm\lessc.cmd   (less的安裝路徑,祥見文章結尾備注。)

 Arguments:--no-color --source-map=$FileNameWithoutExtension$.css.map $FileName$

Working directory:$FileDir$

Output paths to refresh:$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map

單擊右下的“OK”。

3、回到WebStorm打開項目的頁面,點右鍵新建一個lesstest的less文件,會自動產出lesstest.css和lesstest.css.map。

產出的對應的map文件為:

{"version":3,"sources":["lesstest.less"],"names":[],"mappings":";;;;AAKA;EAAO,WAAA;EAAW,gBAAA;EAAgB,kBAAA;EAAkB,mBAAA;EAAmB,sBAAA;;AACvE,KAAM;EAAO,cAAA","file":"undefined"}

4、寫一段less測試一下,會自動編譯成css。

 

備注:做此配置前要事先安裝好nodejs,再裝好less組件。具體安裝方法請見教程《Windows7 x64系統下安裝Nodejs並在WebStorm 9.0.1下搭建編譯less環境》,http://www.cnblogs.com/wind128/p/4135972.html


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM