ミニ プログラムの Vant コンポーネントでデフォルトのスタイル単位 px を rpx に変換する方法

この記事では、WeChat ミニ プログラム で Vant コンポーネントを使用するときに px を rpx に変換する方法を紹介します。

WeChat アプレットがサードパーティのコンポーネント ライブラリ (例: Vant) を使用する場合、コンポーネントのデフォルトのスタイルは px であり、rpx 単位と互換性がありません。私たちのページで。 [関連する学習の推奨事項: 小さなプログラム開発チュートリアル ]

技術的ソリューション

---

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 パッケージ

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": {
    "build": "gulp css",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

下のスクリプトに実行コマンドを追加します。コマンド ラインで実行します

npm run build

9. 変換された wxss ファイルを表示します

px が rpx に変換され、完了です。 ！ ！

プログラミング関連の知識について詳しくは、

プログラミング学習

をご覧ください。 ！

以上がミニ プログラムの Vant コンポーネントでデフォルトのスタイル単位 px を rpx に変換する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。