Hbuilder编辑器 设置less即时编译环境

 之前一直用的纯css写样式表，习惯成自然，觉得less写起来反而比较麻烦，直到写移动端页面要用到rem单位进行计算时才知道less的好

处，但是less编译这块又有点让人为难了，作为菜鸟的我刚开始是使用的koala编译工具进行实时编译成css，但是这种比较麻烦，要一直

开着koala，随后才想到有没有在编辑器里内置的鱼编译工具，叭叭叭说一堆，下面说重点吧；

 

第一步：在hbuilder编辑器里  依次打开菜单栏->工具->预编译器设置，打开后是这样的：

　　

2，选择新建：文件后缀为.less   

 

3： 然后点击确定； 变成如下图  

　　

　　在node环境下全局安装less（输入）：npm install -g less   然后等着安装完成,

　　输入less -v检查版本号，如果有说明安装完成；

　　安装完成要记得lessc.cmd所在的地址；（这里是默认的：C:\Users\Administrator\AppData\Roaming\npm\node_modules\less\bin\lessc）

　　 下图中触发命令地址就是lessc.cmd地址；工作目录可以不填写（点完智能完成默认的css生

　　成地址就是.less文件同级目录），命令参数填写：%FileName% %FileBaseName%.css ; 点 智能完成，

　　　然后就ok了 ，写less文件后边就会自动生成一个同名的css文件了，将css文件引入到页面就可以编写less了；