编译Less文件

标签：属性   检测   div   命令行   效率比较   变量   style   环境变量   输出   

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文件

标签：属性   检测   div   命令行   效率比较   变量   style   环境变量   输出   

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