### [小程序Vant组件怎么将默认样式单位px转为rpx](https://www.prosaas.cn/article/16364)

**Published:** 2021-10-29T03:16:40

**Author:** 5201314

**Excerpt:** 本篇文章给大家介绍一下在微信小程序中使用Vant组件时，将px转为rpx的方法，希望对大家有所帮助！微信小程序…

本篇文章给大家介绍一下在微信小程序中使用Vant组件时，将px转为rpx的方法，希望对大家有所帮助！

![](https://img.php.cn/upload/article/000/000/024/617b668061a27230.jpg)

微信小程序使用了第三方组件库（例如：Vant）时，组件默认样式是使用的px，这无法和我们页面中的rpx单位相兼容。【相关学习推荐：小程序开发教程】

## **技术方案**

* * *

> 1.gulp
> 
> 2.gulp-postcss
> 
> 3.postcss-px2units

## **实现步骤**

1、初始化并安装

npm init //一路回车 
npm install --production 
npm i @vant/weapp -S --production

2、在微信小程序开发工具中勾选npm

![](https://img.php.cn/upload/image/719/543/455/1635476851790523.png)

3、在微信小程序开发工具中构建npm

![](https://img.php.cn/upload/image/786/853/759/1635476925811621.png)

4、构建成功后会出现miniprogram\_npm文件夹

![](https://img.php.cn/upload/image/271/437/540/1635476930482905.png)

5、安装npm包

npm install gulp gulp-postcss postcss-px2units --save-dev

6、在根目录新建gulpfile.js文件

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var pxtounits =  require('postcss-px2units');

gulp.task('css', function () {
  return gulp.src(\['miniprogram\_npm/@vant/weapp/\*\*/\*.wxss'\])
    .pipe(postcss(\[pxtounits({
      multiple: 2,
      targetUnits: 'rpx'
    })\]))
    .pipe(gulp.dest('miniprogram\_npm/@vant/weapp/'));
});

7、在package.json下面的scripts添加一个执行命令

 "scripts": {
    "build": "gulp css",
    "test": "echo \\"Error: no test specified\\" && exit 1"
  },

8、命令行中执行

npm run build

9、查看转换后的wxss文件

![](https://img.php.cn/upload/image/445/287/297/1635476934538254.png)

就此已经将px转化成了rpx，大功告成！！！

更多编程相关知识，请访问：编程学习！！

以上就是小程序Vant组件怎么将默认样式单位px转为rpx的详细内容，更多请关注知企PROSAAS其它相关文章！

**Tags:** gulp, JS, json, npm, postcss, 微信小程序

**Categories:** 后端开发

---