inline-px-to-vw-loader v1.0.4

在webpack中配置转化react中行内样式为vw单位

安装

npm install inline-px-to-vw-loader --save-dev

使用

webpack.config.js

module.exports = {
  module: {
    rules: [
      {  test: /\.tsx$/i,
       use: ["ts-loader", "inline-px-to-vw-loader"]
      },
    ],
  },
};

选项参数 options

默认参数：

{
    viewportWidth: 375,
    unitPrecision: 5,
    viewportUnit: 'vw',
    minPixelValue: 0,
    noConvertPropertyList: [
      'lineHeight',
      'WebkitLineClamp',
      'opacity',
      'zIndex',
    ]
  }

详细参考 https://www.npmjs.com/package/postcss-px-to-viewport

效果

const Demo = () => {
  // 20px 或者 20 ===>  5.33333vw
  return <div style={{ margin: '20px  auto' }}>Test</div>
}

const Demo1 = () => {
  const isTruth = false;
  // 如果为true   20 ====> 5.3333vw;
  // 如果为false   10 ====> 2.66666vw;
  return <div style={{ padding: isTruth ?  20 : 10  }}>Test</div>
}