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

青灯夜游
풀어 주다: 2021-10-29 11:16:40
앞으로
3802명이 탐색했습니다.

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

미니 프로그램의 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을 확인하세요

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

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

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

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

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

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 파일 보기

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

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

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

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

관련 라벨:
원천:juejin.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!