この記事では、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 サイトの他の関連記事を参照してください。