LESS 是一种基于 CSS 的扩展语言，它可以让我们更加方便地编写 CSS 样式。在前端开发中，LESS 已经逐渐成为主流。在本文中，我们将会学习如何在 VS Code 中配置 LESS 实时编译，这样可以让我们更加高效地进行开发。
安装扩展
首先，我们需要在 VS Code 中安装扩展。打开 VS Code，按下 Ctrl + Shift + X 或者点击左侧的扩展图标，搜索 Easy LESS 插件并安装，这个扩展可以让我们在 VS Code 中实时编译 LESS。
配置
安装完扩展后，我们需要进行配置。打开设置页面，按下 Ctrl + , 或者点击左下角的设置图标，在搜索框中输入 “Easy LESS” 进行搜索。在搜索结果中，我们可以看到 Easy LESS 插件的设置，如下图所示。
我们可以根据自己的需求进行配置，比如设置输出路径、使用 sourceMap、和忽略某些文件夹等等。
另外，如果我们需要同时编译多个 LESS 文件，可以在项目根目录下创建一个 less 文件夹，并在其中新建 .less 后缀的文件。然后在设置中配置 lessCompile.allFiles 为 true，这样 Easy LESS 就会自动编译所有的 LESS 文件。
实时编译
配置完成后，我们可以开始编写 LESS 代码了。在编写过程中，只需保存 .less 文件，Easy LESS 就会自动编译生成对应的 .css 文件。
例如，我们新建一个 style.less 文件，并写入以下代码：
--------------- -------- ---- - ----------------- --------------- -
保存后，Easy LESS 会自动编译生成 style.css 文件，如下图所示：
总结
在 VS Code 中配置 LESS 实时编译可以让我们更加高效地进行前端开发。通过安装 Easy LESS 插件和进行简单的配置，我们就可以实现自动编译 LESS 文件，避免手动编译造成的时间浪费。希望本文对大家有所帮助！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6496c49748841e98943fc262