在webpack中配置并使用less直接生成css样式
1、在F盘中创建一个文件夹webpack-less
2、在文件夹中创建index.html
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>webpack demo</title> ???<link rel="stylesheet" href="dist/index.css"></head><body> ???<div class="demo1"></div> ???<script src="dist/bundle.js"></script></body></html>
3、创建index.js
console.log("webpack运行成功!!");require("./index.less");4、创建index.less
@width:100px;@height:100px;body{ ???background:#fff;}.borderR(@w:50%){ ???border-radius: @w;}.demo1{ ????width:@width; ????height:@height; ????.borderR(); ????background:red;}5、创建webpack.config.js
var ExtractTextPlugin = require(‘extract-text-webpack-plugin‘); //引入分离插件，需要安装module.exports = { ???entry: ‘./index.js‘, ???output:{ ???????path: __dirname + ‘/dist‘, ?//导出路径 ???????publicPath:‘/dist‘, //服务器路径 ???????filename:‘./bundle.js‘ ?//文件名 ???}, ???plugins:[ ???????new ExtractTextPlugin(‘./index.css‘) ?//解析less并分离得到的css ???], ???module:{ ???????rules:[ ???????????{ ???????????????test:/\.less$/, ???????????????use: ExtractTextPlugin.extract([ ‘css-loader‘, ‘less-loader‘ ]) ?//解析less使用的规则，从右到左执行，即先执行less-loader ???????????} ???????] ???}}6、在文件夹空白处 shift + 右键 ，选中在此处打开命令窗口
7、在命令行中输入 npm init 设置你的项目信息。（这里直接 Enter到结束或者输入命令 npm init -y） 这里推荐使用 npm init -y
8、在命令行中输入 npm install webpack webpack-dev-server --save-dev （局部安装--推荐） npm install webpack webpack-dev-server --g
9、在命令行中输入npm i less less-loader css-loader style-loader extract-text-webpack-plugin -D
10、在命令行中输入webpack 执行编译
11、在命令行中输入webpack-dev-server 启动服务器。
12、在浏览器中输入http://localhost:8080/index.html 访问到页面
13、修改一下index.less (注意查看浏览器在保存less文件时是否自动刷新页面)
@width:100px;@height:100px;body{ ???background:#fff;}.borderR(@w:50%){ ???border-radius: @w;}.demo1{ ????width:@width; ????height:@height; ????.borderR(); ????background:red; ????padding:10px;}
14、webpack使用less生成css就已经完成了。
webpack简单教程(2)--使用less并生成独立的CSS样式
原文地址：http://www.cnblogs.com/webBlog-gqs/p/7440068.html