首页 > 其他 > 详细

编译Less文件

时间:2020-09-14 00:03:36      阅读:59      评论:0      收藏:0      [点我收藏+]

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

     

编译Less文件

原文:https://www.cnblogs.com/laijinquan/p/13664073.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!