Vue-cli webpackモバイル端末自動ビルドレム問題の詳細説明

この記事では主にVue-cli webpackモバイル端末自動構築rem問題の詳細な説明を紹介し、参考にさせていただきます。

多くの友人がモバイルプロジェクトを rem に自動的に変換したいと考えていると思いますが、これはフロントエンドのトレンドに沿ったもので、手書きやエディターのプラグインで変更を加えるのは非常に不便で、間違いが発生しやすいものです。この方法では次の問題が見つかりました:

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

2 オンライン チュートリアルが不足しており、理解するまでに時間がかかり、vscodeのcssremを手動で設定することも考えましたが、それでも納得できなかったので、最終的には自動化することを考えて次の方法を思いつきました。 rem の構築は参考になります

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'
   }
  ]
 }
}

ステップ 3: webpack.dev.conf.js の下のプラグインに何かを追加する remUnit 属性に注意する必要があります。 Apple 5。ここでは 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
  }
 }

ここまででインストールは完了です

Input font-size:40px

Output font-size:1rem (iphone下)

3 機器はみんな知っています ピクセル比率が違うので、hotcssを使ってデバイスのピクセル比率リンクを調整します

src/assetsに入れました/js/. あなたの習慣に応じてメソッドを導入できます。ここではhotcss.jsをviewport.jsに変更しました

将来みんなに役立つでしょう。

関連記事:

プロパティリソースファイルデータを読み取るAjaxメソッド

ページ上の特定のコンテンツを定期的に更新するAjaxメソッド

応答コンテンツの長さを取得するAjaxメソッド

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