Hbuilder x 自动编译less文件

Hbuilder x 不错的一款IDE,功能强大。
利用Hbuilder x 编译less文件而且是自动编译,方便快捷。
可以把 “你的less文件.less” 编译成 “你的css文件.css”。下面为大家演示。

1、 下载最新版的Hbuilder x
2、打开 Hbuilder x 工具栏-安装插件 选择: 安装 less编译插件和npm插件(如下图)
Hbuilder x 自动编译less文件
Hbuilder x 自动编译less文件
3、安装完成之后打开配置less编译插件编辑文件(如下图):package.json文件

Hbuilder x 自动编译less文件
编辑部分package.json文件代码(如图):
Hbuilder x 自动编译less文件
1、key 修改为 编译快捷键,这里修改为:Ctrl+s (方便操作)

这里需要说明在写完或者修改less文件的时候,必须连续(两次以上)按下Ctrl+s ,因为第一次按下为保存,第二次为编译!

2、注释掉 // “sonDidSaveExecution”: false 这一行代码

完成以上步骤就可以了。下面附我成功的图片。

编译的less文件:(如下图)
Hbuilder x 自动编译less文件
编译后的css文件:(如下图)
Hbuilder x 自动编译less文件
浏览器查看:
Hbuilder x 自动编译less文件

Hbuilder x 自动编译less文件

上一篇:Hbuilder页面之间的跳转及关闭功能


下一篇:HBuilder --- MUI , HTML5