style-vw-loader

一个可以将vue标签内样式px转换vw的 webpack loader

install

npm install style-vw-loader --save-dev

Use

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: {
       
    }
}

Example

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>

option

默认配置

defaultsProp = {
  unitToConvert: 'px',
  viewportWidth: 750,
  unitPrecision: 5,
  viewportUnit: 'vw',
  fontViewportUnit: 'vw',
  minPixelValue: 1
}

参与

只支持vue模板的转换，react模板未提供支持。如果你也有转换style的需求、欢迎参与完善该项目。