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]

Solution technique

1.gulp

2.gulp-postcss

3.postcss-px2units

étapes de mise en œuvre

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!