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!