vscode如何将less编译到指定css目录中

首先使用vscode的搬砖猿，想要在vscode编辑器里面很方便的编译less文件，需要在扩展商店里面下载一款名叫Esay LESS的超好用扩展（我自己都不信），哈哈，其实还好。

安装完扩展之后，最好点击一下重载以启用，为了后面更好的使用这个扩展，其他的扩展也都是重载后使用更佳。。。

想要配置这些扩展，而且仅仅是在当前这个项目中配置，需要在当前项目中（以任意方式）生成一个.vscode的配置文件夹，我们常用的配置都可在这个文件夹生成文件进行配置。

好吧，接着配置我们的LESS,我们需要在.vscode文件夹中建立一个settings.json的文件。输入一下配置信息：

{
    "less.compile": {
        "out": "${workspaceRoot}\\css\\"
    }
}

这是Easy LESS扩展说明里面给出的，最简单的仅仅配置编译后css文件储存位置的配置信息。

注意一下

我自己在使用上面的配置信息时，遇到了几个问题，

• 第一次使用的时候，我将.vscode放在了自己的项目目录中，但是我工作区中很多其他项目（文件夹而已），这时的配置并没有生效，我当时的做法是，单独仅仅使用vscode打开了这一个项目，就好了。

• 还有，我们使用上面的配置信息，很轻易的就可以把编译过后的css文件输出储存到根目录下的css文件夹中，但是我想要储存到其他嵌套多级的文件夹中的时候，需要注意

  {
      "less.compile": {
          "out": "${workspaceRoot}\\css\\users"
      }
  }
  

  • 第一次我这样写，输出到了css文件夹下的users.css文件中，尴尬。。。就是说，想生成到对应的目录下，需要在路径后加上\\标识这是个文件夹。所以正确的写法是：

    {
        "less.compile": {
            "out": "${workspaceRoot}\\css\\users\\"
        }
    }
    
    

  如果我踩到了很多坑，那我就在坑里游游泳。