vscode如何將less編譯到指定css目錄中

首先使用vscode的搬磚猿，想要在vscode編輯器里面很方便的編譯less文件，需要在擴展商店里面下載一款名叫Esay LESS的超好用擴展（我自己都不信），哈哈，其實還好。 安裝完擴展之后，最好點擊一下重載以啟用，為了后面更好的使用這個擴展，其他的擴展也都是重載后使用更佳。。。  

 

想要配置這些擴展，而且僅僅是在當前這個項目中配置，需要在當前項目中（以任意方式）生成一個.vscode的配置文件夾，我們常用的配置都可在這個文件夾生成文件進行配置。

 

好吧，接着配置我們的LESS,我們需要在.vscode文件夾中建立一個settings.json的文件。輸入一下配置信息：

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

　　

這是Easy LESS擴展說明里面給出的，最簡單的僅僅配置編譯后css文件儲存位置的配置信息。

字由https://www.wode007.com/sites/73248.html 中國字體設計網https://www.wode007.com/sites/73245.html

注意一下

我自己在使用上面的配置信息時，遇到了幾個問題，

第一次使用的時候，我將.vscode放在了自己的項目目錄中，但是我工作區中很多其他項目（文件夾而已），這時的配置並沒有生效，我當時的做法是，單獨僅僅使用vscode打開了這一個項目，就好了。 

還有，我們使用上面的配置信息，很輕易的就可以把編譯過后的css文件輸出儲存到根目錄下的css文件夾中，但是我想要儲存到其他嵌套多級的文件夾中的時候，需要==注意==

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

　　

 

第一次我這樣寫，輸出到了css文件夾下的users.css文件中，尷尬。。。就是說，想生成到對應的目錄下，需要在路徑后加上\\標識這是個文件夾。所以正確的寫法是：

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

　　

 

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