IntellJ idea使用FileWatch实时编译less文件的方法

时间:2022-01-08 06:19:45

前言

开发前端的时候,经常会写一些less或者sass文件,但这些文件需要编译成css文件才有效,之前会使用一些自动化构建工具实时监听项目文件变化,需要做些配置。
这里使用idea的file watch插件,无需额外配置,简单方便。

操作

依赖关系

  • node.js与idea的nodejs插件
  • file watch插件
  • 全局安装less

IntellJ idea使用FileWatch实时编译less文件的方法

插件位置

配置file watch

1.项目中新建less文件

IntellJ idea使用FileWatch实时编译less文件的方法

新建less文件

2.配置less文件的file watch。

我们可以看到文件顶部有个是否开启less文件的观察器,点击yes

IntellJ idea使用FileWatch实时编译less文件的方法

配置less的file watch

点击输出路径最右边的插入预定义宏(insert macro),可以看到预定义的宏与它代表的内容

IntellJ idea使用FileWatch实时编译less文件的方法

插入macro界面

最终效果图

IntellJ idea使用FileWatch实时编译less文件的方法

最终配置

可以看到less被实时编译成了css文件

IntellJ idea使用FileWatch实时编译less文件的方法

实时编译图

额外

file watch不仅仅可以观察less文件,实时监听文件变化的操作都可以处理。我们可在idea的配置中自行配置。

IntellJ idea使用FileWatch实时编译less文件的方法

file watch位置

前端我不建议使用sass编译器,因为在windows上安装sass编译器依赖一大堆东西,又是c++,又是python的。虽然在mac或linux上用sass没问题,在windows上使用会出现问题。less与sass功能差不多,最终也都是要编译成css的,有了这么好用的工具还是直接使用less。

总结

以上所述是小编给大家介绍的intellj idea使用filewatch实时编译less文件的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对服务器之家网站的支持!

原文链接:https://www.jianshu.com/p/03f6a26d6dcd