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 in WeChat 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.

##4. After the build is successful, the miniprogram_npm folder will appear

#5. Install the npm package

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

6. Create a new gulpfile in the root directory. js file

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. Add an execution command to the scripts under package.json

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

8. Execute in the command line

npm run build

9. View the converted wxss file

The px has been converted into rpx, and you're done! ! !

For more programming-related knowledge, please visit:

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!