編譯Less文件

LESS官方文檔

一、通過命令行進行編譯(可實時監聽並編譯)

用起來比較復雜，但效率比較高.

1. 步驟一：安裝Node.js nodeJS下載地址

// 配置環境變量
右鍵點擊計算機-[屬性]-[高級系統設置]-[高級]-[環境變量]-[系統變量]-[新建]  
NODE_PATH=安裝地址  

// 通過windows自帶的cmd來測試NodeJS和npm的版本 
// 使用命令行查看版本，檢測是否安裝成功 (npm是NodeJs自帶的包管理工具)
node -v  
npm -v  

2. 安裝Less

// 安裝Less到全局(-g)
npm install less -g
// 使用less命令查看版本，檢測是否安裝成功
lessc -v 
// 編譯指定Less文件 
lessc main.less ./css/main.min.css

3. 安裝CSS壓縮插件

npm install less-plugin-clean-css -g
// 編譯並壓縮文件
lessc main.less ./css/main.min.css --clean-css

4. 安裝自動實時編譯Less文件插件

// 安裝 watcher-lessc 插件到全局
npm install watcher-lessc -g

// watcher-lessc 常用命令
-i  表示輸入文件，后面跟要編譯的less文件 (必要)
-o  表示輸出文件，后面跟要編譯出來的css文件 (必要)
-d  指定要監視的輸入目錄
-c  壓縮css文件
-p  有@import導入項 (測試發現不加也是可以的)

// 指定輸入 .less 文件和輸出 .css 文件
watcher-lessc -i index.less -o css/index.min.css

// 監聽指定輸入目錄
watcher-lessc -i index.less -o css/index.min.css -d ./less

// 編譯並壓縮
watcher-lessc -i index.less -o css/index.min.css -d ./less -c

二、使用VSCode開發工具自動編譯

保存時編譯，可以指定文件，輸出到指定目錄。缺點是不能指定不同文件輸出到指定不同目錄

// 1. 安裝EasyLess插件
// 2. 配置: 首選項 -> 設置 -> 用戶 -> 擴展 (找到EasyLess插件，編輯setting.json文件進行配置)
{
    "less.compile": {
        "compress": false, // 是否壓縮
        "sourceMap": false, // 是否生成map文件，有了這個可以在調試台看到less行數 
        "main": ["a.less","b.less"],
        // "out": true, // 是否輸出css文件，false為不輸出
        "out": "${workspaceRoot}\\css\\com",
        "outExt": ".min.css", // 輸出文件的后綴,小程序可以寫'wxss'
    }
}
// out 為true時，輸出文件在當前目錄, 也可以指定輸出目錄
// main 為指定文件可以上 "a.less", 多個用數組的方式 ["a.less", "b.less"]

// 注意：
// VSCode有工作區的概念，這塊沒搞懂