style-pxtovw-loader

一个可以支持 vue 模版|react 标签上 style 样式 px 转换 vw 的 webpack loader

install

npm install style-pxtovw-loader --save-dev

Use

vue-cli3

{
  chainWebpack: config => {
    config.module
      .rule("vue")
      .test(/\.(vue|js|jsx)$/)
      .use("style-pxtovw-loader")
      .loader("style-pxtovw-loader");
  };
}

vue-cli2

{
    test: /\.(vue|jsx?)$/,
    loader: 'style-pxtovw-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 的需求、欢迎参与完善该项目。