VSCode 配置並使用less
阿新 • • 發佈:2018-12-10
在VsCode中使用Less方法:
- 安裝node.js (這是基本操作了。LESS需要有node.js支援,安裝node.js略過)
- 在VSCode中。搜尋外掛
Easy LESS
。安裝,安裝完後最好重啟一次VSCode - 普通的使用需求都可以滿足了。在需要生成css檔案的地方,新建一個
.less
檔案。如圖:
- 在裡面寫你需要的樣式,儲存後,會自動在同級目錄下,生成同樣名稱的css檔案
- 至此,普通版的Less配置就完成了
進階版:在截圖中,我通常用於小程式開發,如果只是生成.css檔案不能滿足日常的需求,所以可以通過修改配置檔案,來實現我們想要的效果
先生成一個.vscode
。用來存放配置檔案的。至於生成的方法很多,我是隨便按了下F5
。啟動除錯,雖然啟動除錯失敗了,可是會自動生成這個檔案
在.vscode
資料夾中,新增一個配置檔名稱:settings.json
內容如下:
{
"less.compile": {
"compress": true, // 是否刪除多餘空白字元
"sourceMap": false, // 是否建立檔案目錄樹,true的話會自動生成一個 .css.map 檔案
"out": false, // 是否輸出css檔案,false為不輸出
"outExt" : ".wxss", // 輸出檔案的字尾,預設為.css
}
}
這裡我只是實現了一些簡單的配置,詳細的配置可以看vscode外掛的介紹來配置。
至此,小程式除錯也可以使用less了