编译Less文件

Posted yuxi2018

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了编译Less文件相关的知识,希望对你有一定的参考价值。

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

以上是关于编译Less文件的主要内容,如果未能解决你的问题,请参考以下文章

有没有将 css 文件反编译成 less 文件的脚本

怎样用node.js编译less文件

如何将less编译成css文件__less自动编译成css的方法总结

Less 编译工具

less入门

less的编译