Vue-cli webpackモバイルターミナルを使用してremを自動ビルドする方法

这次给大家带来如何使用Vue-cli webpack移动端自动化构建rem，使用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 の場合は 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
  }
 }

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

Input font-size:40px

Output font-size:1rem (以下) iPhone)

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

src/assets/js/に合わせて方法を導入できます。ここでは、hotcss.js を viewport.js に変更しました
これで完了です

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

推奨読書:

vuex プロジェクト構造のディレクトリと構成を正しく使用する方法

以上がVue-cli webpackモバイルターミナルを使用してremを自動ビルドする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。