How to convert the default style unit px to rpx in the Vant component of the mini program

This article will introduce to you how to convert px to rpx when using the Vant component inWeChat Mini Program. I hope it will be helpful to everyone!

When the WeChat applet uses a third-party component library (for example: Vant), the default style of the component is px, which is not compatible with the rpx unit in our page . [Related learning recommendations:小program development tutorial]

Technical solution

1.gulp

2.gulp-postcss

3.postcss-px2units

Implementation steps

1. Initialize and install

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

2. Check npm

in the WeChat Mini Program Development Tool. 3. Build npm

# in the WeChat Mini Program Development Tool.

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

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/')); });

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

npm run build

Programming Learning! !

The above is the detailed content of How to convert the default style unit px to rpx in the Vant component of the mini program. For more information, please follow other related articles on the PHP Chinese website!