React 構成 px 変換 rem メソッド

関連する依存関係をインストールする

npm i lib-flexible --save
npm i postcss-px2rem --save

主にプロジェクト構成を公開するために使用される

npm 実行イジェクト
！ npm run eject を実行してエラーが発生した場合、リポジトリ内のコードが送信されていないことが原因である可能性があります。次のように送信してください。
git を追加します。
git commit -m 'カスタム名'
npm 実行イジェクト

次に、プロジェクトconfig->webpack.config.jsを開いて設定します。

// 設定ファイルに次の2行のコードを追加します
// px2rem({ remUnit: 75 }) は 1rem = 75px を意味します。これは 750px のデザイン案に基づいています。620 の場合は 62 と記述します。

px2rem は postcss-px2rem を必要とします。
px2rem({ rem単位: 75 })

デザインサイズに応じて設定します。例：108 = 1080px/10

lib-flexible をインポート: lib-flexible ファイルをエントリファイル index.js にインポートします。

'lib-flexible' をインポートする

public->index.htmlファイル内の次のコードをコメントアウトします。

設定が完了したらプロジェクトを再起動します

これで、React を設定して px を rem に変換する方法についての記事は終わりです。React を設定して px を rem に変換する方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。