Webpackモバイル端末向けにremを自動構築する手順の詳細な説明

今回は、webpack モバイル端末用の rem を自動構築する手順について詳しく説明します。webpack モバイル端末用の rem を自動構築するための 注意事項 について、実際の事例を見てみましょう。

多くの友人は、フロントエンドのトレンドに合わせて、モバイル プロジェクトを自動的に rem に変換したいと考えていると思いますが、自分で手書きしたり、エディタープラグインを使用して変更を加えたりする場合、非常に不便です。オンラインで検索すると、次の問題が見つかりました:

1 古いビデオチュートリアルに従ってみたところ、node npm webpack px2rem のさまざまなプラグインのバージョンが異なっており、役に立たないことがわかりました。 2 オンラインのチュートリアルが不足していて不完全で、vscode の cssrem を手動で設定することも考えましたが、それでも納得できなかったので、最終的にまとめました。次の方法は、みんなのモバイル端末の構築を自動化することを願っています

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

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

ステップ 1 : npm install px2rem-loader

パート 2: webpack.base.conf.js の下にオブジェクトを追加します。ここでは、sass を使用して変更します。以下のルールに従って、誰もがそれを理解できると思います

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

第三のステップ: webpack.dev.conf.js の下のプラグインに何かを追加する必要があります。Apple 5 の場合は、remUnit 属性に注意する必要があります。ここでは 40 に設定していますが、80 に設定している人もいます。ここで 40 に設定した理由は、hotcss で使用する場合の 4 番目の部分について説明します

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

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

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

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

Input

font-size

:40px

Output font-size: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 サイトの他の関連記事にも注目してください。

推奨読書:

React Router v4 の使用方法の詳細な説明

vue フォームの使用を開始するための手順

以上がWebpackモバイル端末向けにremを自動構築する手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。