WebStorm如何设置Less文件实时编译功能？

本文共计837个文字，预计阅读时间需要4分钟。

WebStorm 支持直接配置 Less 并进行实时编译，但需要满足以下三个前提条件：

确认 node 和 lessc 是否可用

这是最容易卡住的第一步。很多“没反应”其实是命令根本没跑起来。

• 在终端（WebStorm 自带 Terminal 或系统 cmd/PowerShell）中运行 node -v 和 npm -v，必须有输出版本号
• 再运行 lessc -v，如果提示“不是内部或外部命令”，说明 less 没装好或没进 PATH
• 全局安装用 npm install -g less；若因权限或网络失败，可改用本地安装：npm install less，然后 Program 路径要指向项目内 node_modules/.bin/lessc.cmd（Windows）或 lessc（macOS/Linux）
• 注意：某些 Node 版本（如 20+）与旧版 less（npm install -g less@4.2.0 锁定稳定版

File Watcher 中 Program 和 Arguments 的关键写法

WebStorm 的 File Watcher 不是“选中 Less 就自动编译”，它依赖你填对三个字段——尤其是 Program 和 Arguments，错一个就生成空 CSS 或报错。