在hbuilder和vscode中自动编译less

less安装和使用

1. 安装（前提是已经安装好nodejs）

npm install less -g

2. 使用
   新建demo.less文件，随便写入一点代码，比如

body {
  h3  {
    color: red;
  }
}

执行lessc demo.less demo.css,即得到demo.css文件，
文件内容为

body h3 {
  color: red;
}

在编辑中自动编译less文件

上面的方式，每修改一下less文件，就得执行一下编译命令，比较麻烦，下面介绍在hbuilder和vscode中自动编译less文件

在hbuilder中自动编译less文件

• 打开hbuilder --》选项--》预编译器

  
  image.png

• 点击新建，输入文件后缀.less --》点击智能完成 --》确定，

  
  image.png
• 这时你只要新建less文件，保存之后，就会在less文件的当前目录编译出一个同名的css文件

![image.png](https://img.haomeiwen.com/i7177443/3d3868ef9db102b0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

在vscode配置自动编译less

只需安装一个插件 Easy LESS 即可,点击插件管理（红色圆圈的地方），搜索easy less，安装重载即可

image.png