安装
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>
}