webpack编译less

webpack loaders

webpack 编译 less 需要使用到的 loader :

* less-loader

将 less 文件编译成 CSS ；

1.创建本地项目 webpack-demo

2.在 webpack-demo 的根目录下创建 package.json 文件

模块说明：

4.修改 package.json 文件的 scripts 属性值,进行打包资源的掘吵帆配置

5.安装需要的loader和依赖

6.创建一个名为 test.less 的文件

并将该文件引入 webpack 的入口文碰乱件 entry.js 中；

7.配置编译 less 的 loader

7.运行编译判雹命令

LESS ：一种动态样式语言。

LESS 将 CSS 赋予了动态语言的特性，如 变量， 继承， 运算， 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服务端运行。

在介绍如何通过 lessc （less源码编译器）把编写好的.less文件生成.css文件之前，非常有必要了解一下Node.JS。

一、初识Node.js

Node.js不是JS应用、而是JS运行平台，负责执行服务器端的Javascript代码。事实上，Node.js采用C++语言编写而成，是一个衡巧Javascript的运行环境。

Node.js采用了Google Chrome浏览器的V8引擎，性能很好，同时还提供了很多系统级的API，如文件 *** 作、网络编程等。

要想了解更多Node.JS，请参考《深入浅出Node.js》前两篇文章即可

1）.深入浅出Node.js（一）：什么是Node.js

2）.深入浅出Node.js（二）：Node.js&NPM的安装与配置（PS：安装最新版本的Node.JS已默认自带了NPM，无需通过GitHub去安装）

我本机的Node.JS默认安装在D:\nodejs\目录下，如图

启动node.js，查看版本

二、安装LESS包

通过npm install -d less命令安装LESS包。

为咐和键了将less包安装在nodejs的node_modules目录下，可以先进入d:盘，然后使用该命令

LESS包安装完成后，进入D:\nodejs\node_modules\，该目录下有三个目录，分别为less，npm和.bin（该目录下有lessc编译器），把D:\nodejs\node_modules\.bin添加到环境变量中。

三、编写.less文件并编译它

这是一个简单的测试代码test.less，内容如下

复制代码

@color: #4D926F

#header {

color: @color

}

h2 {

color: @color

}

复制代码

该文件位于 E:\Code\VS2013\BootstrapDemo\LessDemo\Less\test.less。

启动node.js控制台，进入test.less文件所在的目录，输入lessc test.less >test.css命令，less文件就会被编棚郑译成css文件

打开生成的test.css 文件

---