vscode裡如何使用less自動編譯成帶檔案名的css檔案

1.先全局安裝less

npm install -g less
           

2.寫一個less字尾的檔案

3. 在vscode應用商店安裝Easy LESS插件

4. vscode編輯器中點選路徑：檔案>首選項>設定 裡面找到settings.json,在檔案的花括号裡加入如下代碼

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

其中，${workspaceRoot}是工作台的根路徑，\後面的是你的檔案夾路徑，最後一個\test則是編譯後生成的css檔案名，如圖所示

如果沒有\\test，那麼編輯器同樣把最後一個\\css作為生成的檔案名，那麼生成的css檔案的路徑就會往上一層，即在less檔案夾下會生成css.css檔案。