Home>Article>WeChat Applet> 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]
1.gulp
2.gulp-postcss
3.postcss-px2units
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 packagenpm install gulp gulp-postcss postcss-px2units --save-dev6. 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 build9. 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!