LESS官方文档 一、通过命令行进行编译(可实时监听并编译) 用起来比较复杂,但效率比较高. 步骤一:安装Node.js nodeJS下载地址 // 配置环境变量右键点击计算机-[属性]-[高级系统设置]-[高
LESS官方文档
一、通过命令行进行编译(可实时监听并编译)
用起来比较复杂,但效率比较高.
- 步骤一:安装Node.js nodeJS下载地址
// 配置环境变量 右键点击计算机-[属性]-[高级系统设置]-[高级]-[环境变量]-[系统变量]-[新建] NODE_PATH=安装地址 // 通过windows自带的cmd来测试NodeJS和npm的版本 // 使用命令行查看版本,检测是否安装成功 (npm是NodeJs自带的包管理工具) node -v npm -v
- 安装Less
// 安装Less到全局(-g) npm install less -g // 使用less命令查看版本,检测是否安装成功 lessc -v // 编译指定Less文件 lessc main.less ./css/main.min.css
- 安装CSS压缩插件
npm install less-plugin-clean-css -g // 编译并压缩文件 lessc main.less ./css/main.min.css --clean-css
- 安装自动实时编译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有工作区的概念,这块没搞懂