uniapp上怎么postcss-px-to-viewport
时间: 2023-11-04 13:22:50 浏览: 130
前端开源库-postcss-px-to-viewport
在Uni-app中使用postcss-px-to-viewport插件来实现px到vw的转换,你可以按照以下步骤进行操作:
1. 安装依赖:在项目根目录下打开终端,执行以下命令安装postcss-px-to-viewport插件及其依赖。
```
npm install postcss-px-to-viewport postcss-viewport-units postcss-preset-env --save-dev
```
2. 配置postcss.config.js:在项目根目录下创建postcss.config.js文件,并添加以下配置。
```javascript
module.exports = {
plugins: {
'postcss-preset-env': {},
'postcss-px-to-viewport': {
unitToConvert: 'px',
viewportWidth: 750, // 设计稿宽度
viewportHeight: 1334, // 设计稿高度,可以不指定
unitPrecision: 3, // 转换后保留的小数位数
propList: ['*'], // 要进行转换的属性列表,*表示全部
viewportUnit: 'vw', // 转换后的单位
fontViewportUnit: 'vw', // 字体使用的视口单位
selectorBlackList: [], // 需要忽略的选择器数组
minPixelValue: 1, // 小于或等于1px不转换
mediaQuery: false, // 是否在媒体查询中转换px
replace: true, // 是否直接替换属性值,而不添加备用属性
exclude: [/node_modules/] // 需要排除的文件路径正则
}
}
}
```
3. 修改vue.config.js:在项目根目录下找到vue.config.js(如果没有则需要创建),添加以下配置。
```javascript
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
require('autoprefixer')(),
require('postcss-px-to-viewport')({
unitToConvert: 'px',
viewportWidth: 750,
阅读全文