WebStorm怎么設置實現自動編譯less文件


首先,需要保證電腦安裝過Node.js,下載地址:https://nodejs.org/en/

安裝Node.js的時候會自動安裝npm

WebStorm怎么設置實現自動編譯less文件 HTML筆記 第1張

然后,安裝lessc模塊

打開cmd控制台

輸入下面一行npm命令,安裝less模塊:-g是全局安裝,如果不加會安裝在當前目錄。

npm install less -g

WebStorm怎么設置實現自動編譯less文件 HTML筆記 第2張

安裝less-plugin-clean-css插件(less的插件,用於壓縮代碼)

npm install less-plugin-clean-css -g

WebStorm怎么設置實現自動編譯less文件 HTML筆記 第3張

PHPStorm 點擊File>Settings>Tools>File Watcher 添加less自動編譯參數

WebStorm怎么設置實現自動編譯less文件 HTML筆記 第4張

PhpStrom會自動識別lessc.cmd文件,如果不能識別,手動找到npm目錄的lessc.cmd文件即可,我這里添加的--clean-css參數會自動代碼壓縮,也可以不加,就不會自動壓縮代碼了。

WebStorm怎么設置實現自動編譯less文件 HTML筆記 第5張

這樣在項目里編輯less文件時,會自動時時生成css文件了

效果如下:

WebStorm怎么設置實現自動編譯less文件 HTML筆記 第6張


免責聲明!

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



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