【笔记】IDEA自动编译Less代码为CSS文件

前言

IDEA自动编译Less代码为CSS文件

下载Less

Npm

1
npm install less -g

下载插件

  • Plugins->File Watchers->Install

    如果是新版本WebStorm则自带File Watchers插件无需重复下载

修改设置让Less代码自动编译

  • IntelliJ IDEA->Settings->Tools->File Watchers->+->Less

  • Program配置为lessc所在路径->OK->OK

MacOS上的可执行文件所在路径:/opt/homebrew/lib/node_modules/less/bin/lessc

完成

  • 重新编辑.less文件并保存,此时会自动在.less同级目录下生成.css文件和.css.map文件

踩坑

  • 报错:/opt/homebrew/lib/node_modules/less/bin/lessc index.less index.css --source-map env: node: No such file or directory

原因

  • IDEA中的环境变量不包含Brew的bin目录,无法在系统的环境变量中找到node命令

解决问题

  • 在系统环境变量的PATH末尾追加:/opt/homebrew/bin

参考文献

掘金——Qian-Zai