• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

小程序Vant组件怎么默认样式单位px转为rpx

武飞扬头像
PHP中文网
帮助80

技术方案


实现步骤

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,大功告成!!!

这篇好文章是转载于:学新通技术网

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 学新通技术网
  • 本文地址: /boutique/detail/tanfiifh
系列文章
更多 icon
同类精品
更多 icon
继续加载