在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
@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文件时是否自动刷新页面)
@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就已经完成了。