Explication détaillée des étapes pour créer automatiquement rem pour les terminaux mobiles webpack

Cette fois, je vais vous donner une explication détaillée des étapes pour construire automatiquement rem pour le terminal mobile webpack. Quelles sont les précautions pour la construction automatique de rem pour le terminal mobile webpack. un cas pratique, jetons un coup d'oeil.

Je crois que de nombreux amis souhaitent convertir automatiquement leurs projets mobiles en rem. Ceci est conforme à la tendance front-end. Il est très gênant d'apporter des modifications par écriture manuscrite ou par éditeur. -ins. Il est facile de faire des erreurs. J'ai cherché de nombreuses méthodes sur Internet et j'ai trouvé les problèmes suivants :

1 J'ai suivi l'ancien didacticiel vidéo et j'ai constaté que les différentes versions de plug-in de node npm webpack px2rem sont différents et inutiles du tout

2 Les tutoriels sur Internet manquaient et étaient incomplets, et il m'a fallu beaucoup de temps pour comprendre. J'ai pensé à configurer manuellement le cssrem de vscode, mais j'y étais. toujours pas convaincu, alors j'ai tout reconstitué et j'ai finalement compris, et j'ai finalement élaboré la méthode suivante, qui, je l'espère, sera utile à la construction automatique de rem par tout le monde sur le terminal mobile

1 Installer vue-cli I Je n'entrerai pas dans les détails à ce sujet, tout le monde devrait pouvoir

2 Installer et configurer px2rem-loader (je n'ai pas utilisé postcss ici et j'ai essayé de nombreux problèmes mais j'ai décidé de l'utiliser)

Première étape : npm install px2rem-loader

Deuxième partie : webpack.base.conf Ajoutez des objets sous js. Ici, j'en utilise d'autres et je les modifie selon les règles suivantes. comprenez-le.

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

La troisième étape : les plugins sous webpack.dev.conf.js Pour ajouter quelque chose, chacun doit faire attention à l'attribut de remUnit, qui est de 40px dans le cas d'Apple 5. Je définissez-le sur 40, et certaines personnes le fixent sur 80. Le 40 ici est à utiliser avec hotcss, dont je parlerai ci-dessous

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

Partie 4 : C'est quelque chose que beaucoup de gens ne connaissent pas. Beaucoup de gens manquent simplement cette étape. Recherchez le const cssLoader sous utils.js et ajoutez ?importLoaders=1

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

L'installation se termine ici

Inputfont-size. :40px

Taille de police de sortie:1rem (sous iphone)

3 Nous connaissons tous l'appareil Le rapport de pixels est différent, nous utilisons donc hotcss pour ajuster le lien de rapport de pixels de l'appareil

Je l'ai mis dans src/assets/js/. Vous pouvez présenter la méthode selon vos habitudes et la définir vous-même. Ici, j'ai changé hotcss.js en

viewport<.>.js

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez faire attention au site Web chinois php Autres articles connexes !

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

Lecture recommandée :

Explication détaillée de l'utilisation de React Router v4

Instructions pour démarrer avec les formulaires vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!