2021新版IDEA设置less自动编译成css

原创已于 2022-01-26 15:28:15 修改 · 2.5k 阅读

CC 4.0 BY-SA版权

文章标签：

于 2021-11-22 22:08:03 首次发布

3 篇文章

订阅专栏

本文详细介绍了如何在IntelliJ IDEA中设置实时编译Less文件的方法，包括安装Node.js，添加NodeJs插件，通过npm安装less，安装Filewatchers插件，并配置自动编译Less到CSS的流程，实现开发过程中的实时预览效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装node.js
下载地址：http://nodejs.cn
IDEA安装NodeJs的插件
命令行使用npm安装less
npm install -g less
这一步如果不安装，设置自动编译时会找不到lessc.exe
IDEA 安装 File watchers 插件
打开IDEA的file → settings → Tools → file watchers
选择‘+’ 选择添加less 编译文件，如下图：
出现这个页面后直接可以点击‘ok’即可，默认值编译后的文件路径与less文件同一路径下，名称与less文件相同，less名称为style.less，如下图：
由于IDEA中修改less文件会造成自动保存，这样file watcher会检测到自动保存，
从而实时把less编译成css