VSCode配置easyLess中的sourceMap

1、背景：

通常我们F12查看源码右下角显示的行数是css文件中的第几行。那么如果当css文件是由less文件生成的，那怎样定位到less文件的第几行呢？答案是：使用easyLess是解析中的sourceMap，其中easyLess是将我们写的.less文件自动转换成.css文件的工具，而sourceMap是easyLess中的一个配置，使得F12下显示的行数能找到less中的行数

2、实现：

复制代码：

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

然后在设置中找到 easy less configure,点击edit in settings.json 

然后在打开的文件中，追加刚才复制的内容：

解释：

         "compress":  true,  // 是否压缩，不用管
         "sourceMap": true,  //改为true,是我们要配置的
         "out":       true, //是否生成CSS文件，要改成true

setting.json文件修改完后，保存。

如果你自己写了other.less文件，保存后easyLess会在当前目录下生成一个othert.css的同名文件，而如果配置了sourceMap,则还会再生成一个other.css.map文件:

3、效果：