hbuilder无法自动编译less文件的解决方案

★ 2018年更新:近段时间很多朋友反映本文的方法已经不适用于hbuilder最新版了。so,给大家介绍一种100%可行的新方法: hbuilder编辑器无法自动编译less文件的终极解决方案之koala考拉解析器


最近用hbuilder 写less文件,保存后发现无法将less文件自动编译成css文件,删掉,重装,依旧不行,每次都要在less文件上右键->编译 才能得到最新的css文件,本来就是件高效率的事,但这么一来,兴致全无。同事说7.3.2版本之前的hbuilder保存后可以自动编译,但我这么个有强迫症的人怎么可能折回去用旧版?!

后来百度了一下,找到了解决方案:

当然,如果你的less文件保存后无法自动编译,首先你得检查一下less插件安装了没,依次找到 工具->插件安装,如果显示已安装就表示less插件已经安装好了,如果没安装,就勾选上安装一下即可。如下图

qq%e6%88%aa%e5%9b%be20160921194325

依次找到  工具->预编译器设置,选择.less,然后点击编辑。

qq%e6%88%aa%e5%9b%be20160921194623

触发命令地址里填less的编译脚本lessc.cmd地址,在你hbuilder软件文件夹中搜索 lessc.cmd,就能找到这个文件了,在上面右键->属性就能找到他的具体地址。例如我的路径是:D:\绿色软件\HBuilder\plugins\com.pandora.nodejs.thrift_1.0.0.201609081718\js\node_modules\.bin\lessc.cmd

命令参数里写 %FileName% %FileBaseName%.css

点击确定后,再去编写less文件,就能自动编译成css文件了。

qq%e6%88%aa%e5%9b%be20160921194710

关于博主
骨灰级博客玩家
国内第一批90后网站站长/程序员
做过七年前端讲师
目前从事锦鲤观赏鱼电商行业
鱼贝贝锦鲤创始人
文章列表
1
换种超炫酷的姿势写代码,webstorm activate-power-mode插件安装及配置
换种超炫酷的姿势写代码,webstorm activate-power-mode插件安装及配置
2
老孙IT数码站 低调上线
老孙IT数码站 低调上线
3
玩转京东云主机之③-域名解析
玩转京东云主机之③-域名解析
4
WordPress程序网站快速关闭评论功能 - Disable Comments插件
WordPress程序网站快速关闭评论功能 - Disable Comments插件
5
用nodejs实现txt文档的指定行数分割
用nodejs实现txt文档的指定行数分割
最新评论
比比拉布
比比拉布
5月7日
太感谢了!!!!!!找了这么多的教程,只有你点出来了关键点——设计视图!!!!
Jake
Jake
3月7日
Halo 啊~麻烦更新下我的博客地址,原名:Jing Blog。麻烦更新如下: Jake Blog(后缀可以省略,也可以保留,看哪个风格适合) 网址:htt
评论于关于博主