w3h5

WebStorm怎么设置实现自动编译less文件

有些人写less文件习惯用Koala进行编译,如果用PhpStorm的话就没必要使用Koala,简单设置一下就可以实现自动编译了。方法如下:

首先,需要保证电脑安装过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张

PhpStorm会自动识别lessc.cmd文件,如果不能识别,手动找到npm目录的lessc.cmd文件即可,我这里添加的--clean-css参数会自动代码压缩,也可以不加,就不会自动压缩代码了。

WebStorm怎么设置实现自动编译less文件 HTML笔记 第5张

这样在项目里编辑less文件时,会自动时时生成css文件了

效果如下:

WebStorm怎么设置实现自动编译less文件 HTML笔记 第6张

赞 (2)
分享到: +More |

评论 沙发

换个身份