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张

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

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

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

效果如下：

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