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