less:
1.less
2.less-loader
安装:cnpm i less less-loader -D
index.js入口文件引入:
import '../less/index.less';
src下新建less文件,index.less
@w:120px;
@border:1px solid #000;
#box{
width: @w;
border:@border;
ul {
margin: 0;
padding:0;
list-style: none;
li{
height: 30px;
background: green;
}
}
}
webpack.config.js文件配置:
module:{
rules:[//对象
//这里面放的就是一个个的loader,每一个loader要放在一个对象里,这里面的内容不能变,从后往前解析
{
test:/\.less$/,
use:[
{
//loader是可以进行参数的配置的,如果需配置的话就必须放再一个对象当中
loader:MiniCssExtractPlugin.loader,
options:{
publicPath: '../',
}
},
'css-loader',
'less-loader'
]
}
]
}