Hbuilder x 自动编译less文件

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

1、 下载最新版的Hbuilder x
2、打开 Hbuilder x 工具栏-安装插件 选择: 安装 less编译插件和npm插件(如下图)

在这里插入图片描述


在这里插入图片描述


3、安装完成之后打开配置less编译插件编辑文件(如下图):package.json文件

在这里插入图片描述


编辑部分package.json文件代码(如图):

在这里插入图片描述


1、key 修改为 编译快捷键,这里修改为:Ctrl+s (方便操作)

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

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

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

编译的less文件:(如下图)

在这里插入图片描述


编译后的css文件:(如下图)

在这里插入图片描述


浏览器查看:

在这里插入图片描述

在这里插入图片描述

相关文章

一:HBuilder打包https://jingyan.baidu.com/article/e3c78d...
如何将H5和WebApp加壳成apk、ipa  问题:已经做好的纯H5的...
史上最全最实用HBuilder快捷键大全 一、文件操作二、编辑操...
常用模拟器的端口夜神模拟器端口号:62001海马玩模拟器端口号...
---恢复内容开始---     ---恢复内容结束---
http://ask.dcloud.net.cn/question/28090后台自动运行,定期...