LESS官方文档

一、通过命令行进行编译(可实时并编译)

用起来比较复杂，但效率比较高.

1. 步骤一：安装Node.js nodeJS下载地址

// 配置环境变量右键点击计算机-[属性]-[高级系统设置]-[高级]-[环境变量]-[系统变量]-[新建]  NODE_PATH=安装地址  // 通过windows自带的cmd来测试NodeJS和npm的版本 // 使用命令行查看版本，检测是否安装成功 (npm是NodeJs自带的包管理工具)node -v  npm -v

1. 安装Less

// 安装Less到全局(-g)npm install less -g// 使用less命令查看版本，检测是否安装成功lessc -v // 编译指定Less文件 lessc main.less ./css/main.min.css

1. 安装CSS压缩插件

npm install less-plugin-clean-css -g// 编译并压缩文件lessc main.less ./css/main.min.css --clean-css

1. 安装自动实时编译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有工作区的概念，这块没搞懂