安装:
npm i px2vw-view-loader
配置:
按以下loader格式,添加进入webpack配置文件,实现从px转换成vw,适用于移动端项目
module: {
rules: [{
test: /.css$/,
loader:'px2vw-view-loader',
query:{
viewportWidth: 750,
viewportUnit: 'vw',
minPixelValue:1,
decimal:3
}
}]
}
也支持聚合的写法
module: {
rules: [{
test: /.css$/,
use: ExtractCSS.extract({
fallback: "style-loader",
use: [{
loader: 'px2vw-view-loader',
query: {
viewportWidth: 750,
viewportUnit: 'vw',
minPixelValue: 1,
decimal: 3
}
}, {
loader: "css-loader"
}]
})
}]
}
参数:
参数名 默认值 备注
viewportWidth 750 设计稿宽度,单位像素
viewportUnit 'vw' 转换单位
minPixelValue 1 最小转换单位,例如minPixelValue:1,则1px及以下不进行转换
decimal 3 转换后保留的小数位数
Keywords
webpackpx2vwvw