小程序Vant組件如何將默認樣式單位px轉(zhuǎn)為rpx

本篇內(nèi)容介紹了“小程序Vant組件如何將默認樣式單位px轉(zhuǎn)為rpx”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

實現(xiàn)步驟

1、初始化并安裝

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

2、在微信小程序開發(fā)工具中勾選npm

3、在微信小程序開發(fā)工具中構(gòu)建npm

4、構(gòu)建成功后會出現(xiàn)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添加一個執(zhí)行命令

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

8、命令行中執(zhí)行

npm run build

9、查看轉(zhuǎn)換后的wxss文件

“小程序Vant組件如何將默認樣式單位px轉(zhuǎn)為rpx”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！