less使用方法

1、less可以在node.js环境下运行

2、less可以在浏览器中直接运行

2.1、浏览器中运行方式一

步骤：

• （1）编写less文件
• （2）引入less文件
• （3）引入less.js下载地址
• （4）运行

//引用文件
<link rel="stylesheet/less" href="css/index.less">
<script src="js/less.min.js"></script>

注意点:

• 一定要先引入less.css再引入less.js。不然无效果
• less.css引入的写法为 。一定要在rel中添加“/less”
• 如果less代码是写到单独的文件中, 一定要在服务端环境（webstrom中打开就是服务端环境）运行才能生效。如果直接打开HTML打开，就会无效。

本用法存在的问题：

因为是在运行的时候才通过less.js文件对.less文件进行加工处理，因此在运行的时候加工处理会产生性能问题。

2.2、浏览器中运行方式二：

提前预编译

步骤：

• （1）编写less文件
• （2）利用工具转换为css文件（转换方法见下方）
• （3）引入css文件

<link rel="stylesheet" href="css/index.css">  

工具转换为css文件常用方法：

方法一：考拉客户端:下载较慢（win中安装，不要修改路径）
优点：无需引入less.js, 无需在服务端运行

• 使用方法如下：
  （1）点击“+”号选择.less文件所在文件夹
  （3）选中.less文件
  （4）点击“Compile”按钮，开始将.less文件转换为.css文件。
  （5）出现“success”提示后，点击“Refresh”按钮，编译器中.less下方就会出现转换成功的.css文件
  
  
  方法二：开源中国（在线转换网站）
  复制写好的.less文件内容，粘贴到左侧输入框。
  点击Less》CSS按钮，即可生成CSS代码
  
  方法三：构建工具配置loader自动编译:
  之前使用考拉将less代码转换为css代码，较麻烦。现使用webpack

1. less-loader
   自动将less转换为CSS
2. less-loader使用:
   2.0 安装less
   npm install --save-dev less
   2.1 安装less-loader
   npm install --save-dev less-loader
   可以直接写为：npm install --save-dev less-loader less。即安装less环境和安装less-loader
   2.2配置less-loader

{
test: /\.less$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "less-loader"
}]
}

注意点:
因为loader是从右至左从下至上,所以必须先由less-loader处理往后才能交给其他loader处理。对使用webpack配置文件有疑虑的童鞋可看webpack配置文件写法；webpack的了解，安装及打包文件方法