微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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文件:(如下图)

在这里插入图片描述


浏览器查看:

在这里插入图片描述

在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐