如何设置Easy LESS，可以在网页源码中显示代码在less中的位置

        问题：网页源代码中只显示该样式在css中的位置，而不显示在less中的位置。

        解决方法：在vscode中安装扩展包、并通过一些设置来解决该问题

       

---

第一步：打开vscode软件，在扩展中搜索并下载最新版 Easy LESS

第二部：在该扩展中找到Advanced Usage栏并复制下面大括号里面的代码（注意不要最外层的大括号）

样例：

"less.compile": {
        
        "compress": true, // true => remove surplus whitespace
        "sourceMap": true, // true => generate source maps (.css.map files)
        "out": true // false => DON'T output .css files (overridable per-file, see below)
      }

 第三步：打开设置,打开扩展栏，找到Easy LESS，点击在settings.json中编辑

 第四步：将复制的代码粘贴到该文件里的代码后面，在大括号里面（注意在上一行代码后面加英文分号）

文件原本的样子

 

复制后的样子

第五步：设置Easy LESS中的三个配置选项

        compress：对文件进行压缩

        sourceMap：生成源代码地图，解决该问题的方法

        out：生成css文件，该扩展的基本功能

代码中的三个配置选项的设置：

配置选项	作用
compress	是否进行压缩
sourceMap	是否生成源码地图
out	是否生成css文件

完成之后的效果