1.0.1 • Published 12 months ago
postcss-px-to-viewport-inline v1.0.1
描述
用来将行内样式中的px转换为vw的loader
例子
输入
<div style="width: 10px;height: 10px;background-color: aqua;"></div>
输出
<div style="width: 1.333vw;height: 1.333vw;background-color: aqua;"></div>
开始使用
安装
Add via npm
$ npm install postcss-px-to-viewport-inline --save-dev
or yarn
$ yarn add -D postcss-px-to-viewport-inline
使用方式
Default Options:
{
viewportWidth: 750,
viewportUnit: 'vw',
unitPrecision: 3,
minPixelValue: 1
}
viewportWidth
(Number) 视图宽度,根据设计稿而定。viewportUnit
(String) 转换后的单位,默认为vw。unitPrecision
(Number) 转换精度,即最多保留几位小数。minPixelValue
(Number) 最小转换量,默认为1px,即 <= 1px不作转换。
以vue项目为例
vue.config.js
module.exports = {
configureWebpack: (config) => {
config.module.rules.push({
test: /\.(vue)$/,
use: {
loader: 'postcss-px-to-viewport-inline',
options: {
minPixelValue: 0
}
}
})
}
}