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 >

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

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

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

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

npm run build

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

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati:

! !

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!