您的位置:首页 > 产品设计 > UI/UE

如何在HBuilder中将less转换为css

2017-05-20 00:00 309 查看
最近工作中开始使用HBuilder了,我会将使用它的一些心得写下来,如果你也在用,希望一同分享学习哈。
less是一个特别好的css预处理器,这里不介绍less,不了解的可以到less网站看一下:附地址less中文网

言归正传,如何将less转为css?我会写的非常详细,希望能帮助到初学者们。

方法一:HBuilder中菜单栏中工具---预编译器设置,打开后,选择.less---编辑,文件后缀就是.less,触发命令的地址就是HBuilder安装文件中的lessc.cmd文件所在位置(参考:D:\software\HBuider\HBuilder\plugins\com.pandora.nodejs.thrift_1.0.0.201703172049\js\node_modules\less.bin\lessc.cmd)《这里说明一下:我也没有在此文件中找到这个,但是设置以后是可以使用的》。工作目录当然就是你的项目文件夹了,命令参数写这个: %FileName% %FileBaseName%.css。然后点击确定即可。当你重启HBuilder的时候,在你项目中的less文件中右击就可以看到有一个编译选项,好了,这样就可以转换了。

方法二:下载一个koala工具(附下载地址:koala下载),下载后将需要编译转换的less文件拖入到该软件中即可,refresh一下,之后只要在后台运行着koala工具,那么修改了less文件保存就会直接将内容更新到编译后的css中。

方法三: 现在项目中最常用的应该是gulp了吧,gulp只要设置过一次,之后都会自动进行编译,具体的需要自学gulp就可以了。
如果还有什么不懂的,可以随时留言哦,我会尽量快回复大家。各位大神,请略过。。。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息