hbuild使用postcss-px-to-viewport
时间: 2024-01-10 20:21:47 浏览: 102
hbuild使用postcss-viewport的步骤如下:
1. 首先,确保你已经在项目中安装了postcss-px-to-viewport插件。你可以使用npm或yarn来安装该插件,具体命令如下:
```shell
npm install postcss-px-to-viewport --save-dev
```
或
```shell
yarn add -D postcss-px-to-viewport
```
2. 在项目的根目录下找到postcss.config.js文件(如果没有则新建一个),并在该文件中配置postcss-px-to-viewport插件的参数。具体配置如下:
```javascript
module.exports = {
plugins: {
'postcss-px-to-viewport': {
viewportWidth: 750, // 设计稿的宽度
viewportHeight: 1334, // 设计稿的高度
unitPrecision: 3, // 转换后的小数位数
viewportUnit: 'vw', // 转换的单位
selectorBlackList: ['.ignore', '.hairlines'], // 需要忽略的CSS选择器
minPixelValue: 1, // 最小的转换数值
mediaQuery: false // 是否转换媒体查询中的px
}
}
}
```
3. 配置完成后,hbuild会自动将项目中的px单位转换为viewport单位。
阅读全文