Cara menukar px unit gaya lalai kepada rpx dalam komponen Vant program mini

Artikel ini akan memperkenalkan kepada anda cara menukar px kepada rpx apabila menggunakan komponen Vant dalam applet WeChat Saya harap ia akan membantu anda!

Apabila applet WeChat menggunakan pustaka komponen pihak ketiga (contohnya: Vant), gaya lalai komponen ialah px, yang tidak serasi dengan unit rpx dalam halaman kami. [Cadangan pembelajaran berkaitan: Tutorial Pembangunan Program Mini]

Penyelesaian Teknikal

---

1.gulp

2.gulp-postcss

3.postcss-px2units

Langkah pelaksanaan

1 >

2. Semak npm dalam Alat Pembangunan Program Mini WeChat

npm init //一路回车 
npm install --production 
npm i @vant/weapp -S --production

3 Bina npm dalam Alat Pembangunan Program Mini WeChat

4. Selepas binaan berjaya, folder miniprogram_npm akan muncul

5. Pasang pakej npm

6 . Pada akar Buat fail gulpfile.js baharu dalam direktori

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

7. Tambah arahan pelaksanaan pada skrip di bawah package.json

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/'));
});

8. Jalankan dalam baris arahan

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

9 Lihat fail wxss yang ditukar

npm run build

Pada ketika ini, px telah ditukar kepada rpx dan anda telah selesai! ! !

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati:

Belajar Pengaturcaraan

! !

Atas ialah kandungan terperinci Cara menukar px unit gaya lalai kepada rpx dalam komponen Vant program mini. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!