一、下载安装Easy LESS

1. 首先利用vscode的插件功能搜索并下载安装Easy LESS

   二、指定css文件保存路径  

方法一：直接使用

此时自动生成的.css文件与.less文件位于同一目录下

方法二和方法三均需在settings.json中配置less.complie项

  

方法二：相对路径法

如下我设置的路径可以理解为，less文件的上一层目录下创建一个css文件夹，然后把less文件生成的css文件存在css这个文件夹中。

如上设置，保存style.less文件后，会生成的文件目录结构如下所示，其中style.css为style.less生成的对应css文件

 

 

方法三： 绝对路径法

${workspaceRoot}代表根目录

下图表示设置的文件保存路径为：根目录\exercise文件夹\css文件夹下

生成的文件目录结构：

 

参考：

vscode：如何在保存less文件时，自动生成对应的css文件，并指定css文件的保存路径-爱码网