小程式Vant元件怎麼將預設樣式單位px轉為rpx

本篇文章跟大家介紹一下在微信小程式中使用Vant元件時，將px轉為rpx的方法，希望對大家有幫助！

微信小程式使用了第三方元件庫（例如：Vant）時，元件預設樣式是使用的px，這無法與我們頁面中的rpx單位相容。 【相關學習推薦：小程式開發教學】

技術方案

---

1.gulp

2.gulp-postcss

3.postcss-px2units

實作步驟

##1、初始化並安裝

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

2、在微信小程式開發工具中勾選npm

#3、在微信小程式開發工具中建構npm

#4、建置成功後會出現miniprogram_npm資料夾

####5、安裝npm套件###

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

###6、在根目錄新建gulpfile. js檔案###

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、在package.json下面的scripts新增一個執行指令###

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

###8、命令列中執行###

npm run build

###9、檢視轉換後的wxss文件###############就已經將px轉換成rpx，大功告成了！ ！ ！ ######更多程式相關知識，請造訪：###程式設計學習###！ ！ ###

以上是小程式Vant元件怎麼將預設樣式單位px轉為rpx的詳細內容。更多資訊請關注PHP中文網其他相關文章！