Les projets mobiles sont automatiquement convertis en rem

Cette fois je vais vous présenter la conversion automatique des projets mobiles en rem Quelles sont les précautions pour la conversion automatique des projets mobiles en rem Voici un cas pratique, jetons un oeil.

Je crois que de nombreux amis souhaitent convertir automatiquement leurs projets mobiles en rem, ce qui est conforme à la tendance front-end. Il est très peu pratique et sujet aux erreurs d'apporter des modifications par écriture manuscrite ou par des plug-ins d'éditeur. . Je suis en ligne, j'ai cherché de nombreuses façons et j'ai trouvé les problèmes suivants :

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

2 En ligne Le tutoriel était manquant et incomplet, et il m'a fallu beaucoup de temps pour le comprendre. J'ai pensé à définir manuellement les paramètres cssrem de vscode, mais je n'étais toujours pas convaincu, alors j'ai tout reconstitué, et j'ai enfin compris. J'espère que les méthodes suivantes seront utiles à tout le monde pour créer automatiquement rem sur les terminaux mobiles

1 Je n'entrerai pas dans les détails sur l'installation de vue-cli, tout le monde devrait le savoir

2 Installez et configurez px2rem-loader (ici, j'ai essayé de nombreux problèmes sans utiliser postcss mais j'ai décidé d'utiliser celui-ci)

Première étape : npm install px2rem-loader

Deuxième partie : Ajouter objets sous webpack.base.conf.js, ici j'utilise sass Si vous utilisez d'autres outils, suivez simplement les règles suivantes, je pense que tout le monde peut le comprendre

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

Étape 3 : Ajoutez quelque chose au fichier. plugins sous webpack.dev.conf.js. Tout le monde doit faire attention à l'attribut de remUnit, qui est 40px dans le cas d'Apple 5. Je l'ai défini sur 40 ici, et certaines personnes l'ont défini sur 80. Le 40 ici est pour utiliser avec hotcss. J'en 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 savent pas. Beaucoup de gens manquent simplement cette étape. Trouvez 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
  }
 }

Jusqu'à présent, l'installation est terminée

Entrée font-size:40px

Sortie font-size:1rem (sous iphone)

3 Nous savons tous que le rapport de pixels des appareils est différent, nous utilisons donc hotcss pour l'ajuster. Le lien du rapport de pixels de l'appareil

Je l'ai mis dans src/assets/js/.

présentez la méthode selon vos habitudes. Vous pouvez définir n'importe quel nom vous-même. Ici, je vais le changer dans hotcss.js Pour viewport.js

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

C'est ça !

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 prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser le répertoire et la configuration de la structure du projet vuex

Appliquer les modules angulaires2 et partagés

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!