编译Less文件

Posted 2022-06-24 yuxi2018

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有工作区的概念，这块没搞懂