Webpackのモバイル端末自動ビルドレム方法の詳細説明

今回は、webpackのモバイル端末上でremを自動構築する方法について詳しく説明します。 webpackのモバイル端末上でremを自動構築する際の注意事項は何ですか。実際のケースを見てみましょう。一見。

1 古いビデオチュートリアルに従って、node npm webpack px2rem のさまざまなプラグイン バージョンが異なっており、まったく役に立たないことがわかりました

2. インターネット上のチュートリアルが不十分で不完全だったので、vscode の csrem を手動で設定しようと考えましたが、それでも納得できませんでした。以下の方法が提案されており、モバイル端末用のremを自動構築する皆さんの参考になれば幸いです

1 vue-cli のインストールについては詳しく説明しませんが、誰もが知っているはずです

2 px2rem-loader をインストールして設定します (ここでは postcss は使用しません。多くの問題を試した結果、これを使用することにしました)

最初のステップ: npm install px2rem-loader

パート 2: webpack.base.conf.js の下に objects を追加します。ここでは sass を使用します。他のものを使用する場合は、次のルールに従ってください

module.exports={
module: {
  rules: [
   {
    test: /\.(css|less|scss)(\?.*)?$/,
    loader: 'style-loader!css-loader!sass-loader!less-loader!postcss-loader'
   }
  ]
 }
}

。 ステップ 3: webpack.dev.conf.js の下のプラグインに何かを追加します。皆さんは remUnit 属性に注意する必要があります。Apple 5 の場合は 40px です。ここでは 40 に設定していますが、80 に設定している人もいます。ここに 40 があります。これは、以下で説明する hotcss で使用するためです

 plugins: [
  new webpack.LoaderOptionsPlugin({
   // webpack 2.0之后， 此配置不能直接写在自定义配置项中， 必须写在此处
   vue: {
    postcss: [require('postcss-px2rem')({ remUnit: 40, propWhiteList: [] })]
   }
  }
 ]

パート 4: これは多くの人が知らないことですが、多くの人はこのステップを見逃しています。utils.js で const cssLoader を見つけて、?importLoaders=1

 const cssLoader = {
  loader: 'css-loader?importLoaders=1',
  options: {
   minimize: process.env.NODE_ENV === 'production',
   sourceMap: options.sourceMap
  }
 }

を追加します。 ここまででインストールは完了です

フォントサイズ:40px

を入力してください 出力フォントサイズ:1rem (iPhone の場合)

3 デバイスのピクセル比が異なることは誰もが知っているので、hotcss を使用してデバイスのピクセル比を調整します

。 src/assets/js/ に置いておきますので、自分の習慣に従ってください

メソッドを導入するには、任意の名前を自分で定義できます。ここでは、hotcss.js を viewport.js

module.exports = {
 entry: {
  app: './src/main.js',
  rem: './src/assets/js/viewport.js'
 }
}

に変更しました。 これで完了です

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

PHP の反復子インターフェース Iterator の使用方法

php zip パッケージの内容を指定されたディレクトリに解凍する詳細な手順

以上がWebpackのモバイル端末自動ビルドレム方法の詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。