HBuilder配置Less或者Sass自动编译

关于Less\Sass或者其他CSS预处理语言的讲解，这里都没有！
这里主要讲的是HBulider里面怎样开启Less自动编译功能，实现我们编写less的时候，自动生成对应的css而不用每次都手动编译一次，实现自动化。

首先，你的电脑里面必须有less编译环境才行，如下图箭头所指的lessc.cmd。
如果没有也不要着急，用node.js安装一下less即可，git里的命令行是“npm install -g less”，cmd得在前面加上“$”符，mac系统我不管。文件安装完成后的位置都差不多，划红线的位置不同电脑路径名不一样。

配置环境已经OK，打开HBuilder,在顶部菜单工具–》找到预编译器设置选项。如下图：

这是我的已经配置好的，假设你什么都没有配置。点击新建，你会看到如下界面。

先把文件后缀名填一下，用less的填写.less后缀就行，然后点击红框里面的自动完成，它就帮你自动填写好相关的路径了，点击确定保存配置！然后你就可以新建less文件然后开始写代码，保存的时候你会发现它帮你建立了一个同名的css文件并且自动把你的less编译成对应的css了，超爽的！

另外我附带提一下VS2015和VS2017里面的Less自动编译的方法，你只用在你的VS里面安装一个叫做LESS Compiler的插件就可以了。然后新建less文件，发现代码编辑窗口多了一个开关，开启它之后就写less的时候会自动生成一个同名的CSS文件和一个压缩版的同名CSS文件，同样爽的不行！