在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就已经完成了。
时间： 2024-10-06 15:34:11