1. 程式人生 > >VSCode 配置並使用less

VSCode 配置並使用less

在VsCode中使用Less方法:

  1. 安裝node.js (這是基本操作了。LESS需要有node.js支援,安裝node.js略過)
  2. 在VSCode中。搜尋外掛 Easy LESS。安裝,安裝完後最好重啟一次VSCode
  3. 普通的使用需求都可以滿足了。在需要生成css檔案的地方,新建一個.less檔案。如圖:
    這裡寫圖片描述
  4. 在裡面寫你需要的樣式,儲存後,會自動在同級目錄下,生成同樣名稱的css檔案
  5. 至此,普通版的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了