webstorm自动编译less文件(完整流程步骤)

第一步安装Node.js

下载node官网推荐的版本就行
node.js官网

第二步安装less模块

打开cmd控制台
输入下面npm命令，安装less

npm install less -g

安装less-plugin-clean-css插件（less的插件，用于压缩代码）

npm install less-plugin-clean-css -g

第三步webstorm配置

点击File>Settings>Tools>File Watcher 添加less自动编译参数

program这个地方填写的是less的cmd文件路径，如果你没有改变路径可以直接复制我提供的路径地址
program:

C:\Users\Administrator\AppData\Roaming\npm\lessc.cmd

Arguments：

$FileName$ $FileParentDir$\css\$FileNameWithoutExtension$.css --source-map

完成以上操作最好重启webstorm，防止报错！！！

注意：因为Arguments路径配置问题，less文件必须新建在CSS文件路径下，生成.css和.css.map文件，不然less不会自动编译！！！(重点)

以上仅供参考