미니 프로그램의 Vant 구성 요소에서 기본 스타일 단위 px를 rpx로 변환하는 방법

이 글은 WeChat 애플릿에서 Vant 구성 요소를 사용할 때 px를 rpx로 변환하는 방법을 소개합니다.

WeChat 애플릿이 타사 구성 요소 라이브러리(예: Vant)를 사용하는 경우 구성 요소의 기본 스타일은 px이며 이는 당사 페이지의 rpx 단위와 호환되지 않습니다. [관련 학습 권장사항: Mini 프로그램 개발 튜토리얼]

기술 솔루션

---

1.gulp

2.gulp-postcss

3.postcss-px2units

구현 단계

1.

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

2. WeChat 미니 프로그램 개발 도구에서 npm을 확인하세요

3. WeChat 미니 프로그램 개발 도구에서 npm을 빌드하세요

4. miniprogram_npm 폴더가 나타납니다.

5. npm package

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

6를 설치합니다. 루트 디렉터리

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에 새 gulpfile.js 파일을 생성합니다. package.json

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

8에서 실행 명령을 추가합니다. command line

npm run build

9. 변환된 wxss 파일 보기

이제 px가 rpx로 변환되었으면 완료되었습니다! ! !

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 배우기를 방문하세요! !

위 내용은 미니 프로그램의 Vant 구성 요소에서 기본 스타일 단위 px를 rpx로 변환하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!