Maison >Applet WeChat >Développement de mini-programmes >Comment convertir l'unité de style par défaut px en rpx dans le composant Vant du mini programme
Cet article vous présentera comment convertir px en rpx lors de l'utilisation des composants Vant dans Applet WeChat J'espère qu'il vous sera utile !
Lorsque l'applet WeChat utilise une bibliothèque de composants tiers (par exemple : Vant), le style par défaut du composant est px, ce qui n'est pas compatible avec l'unité rpx de notre page. [Recommandations d'apprentissage associées : Tutoriel de développement de mini-programmes]
1.gulp
2.gulp-postcss
3.postcss-px2units
1. Initialisez et installez
npm init //一路回车 npm install --production npm i @vant/weapp -S --production
2. Vérifiez npm dans le mini-outil de développement de programme WeChat
3. Construisez npm dans le mini-outil de développement de programme WeChat
4.
5. Installez le package npm
npm install gulp gulp-postcss postcss-px2units --save-dev
6. Créez un nouveau fichier gulpfile.js dans le répertoire racine
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. Ajoutez une commande d'exécution aux scripts sous package.json
"scripts": { "build": "gulp css", "test": "echo \"Error: no test specified\" && exit 1" },
8. ligne de commande
npm run build
9. Affichez le fichier wxss converti
À ce stade, px a été converti en rpx, et vous avez terminé ! ! !
Pour plus de connaissances sur la programmation, veuillez visiter : Apprendre la programmation ! !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!