一个可以将vue标签内样式px转换vw的 webpack loader
npm install style-vw-loader --save-dev
vue-cli3
{
chainWebpack: (config) => {
config.module
.rule('vue')
.test(/\.vue$/)
.use('style-vw-loader')
.loader('style-vw-loader')
}
}vue-cli2
{
test: /\.(vue|jsx?)$/,
loader: 'style-vw-loader',
options: {
}
}
from
<h3 style="font-size: 28px;margin-top: 10px" width="500px">Test</h3>To
<h3 width="66.66667vw" style="font-size: 3.73333vw; margin-top: 1.33333vw;">Test</h3>默认配置
defaultsProp = {
unitToConvert: 'px',
viewportWidth: 750,
unitPrecision: 5,
viewportUnit: 'vw',
fontViewportUnit: 'vw',
minPixelValue: 1
}只支持vue模板的转换，react模板未提供支持。如果你也有转换style的需求、欢迎参与完善该项目。