ミニ プログラムの 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

## をビルドします。##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 サイトの他の関連記事を参照してください。