Comment utiliser le terminal mobile Vue-cli webpack pour créer automatiquement rem

这次给大家带来如何使用Vue-cli webpack移动端自动化构建rem，使用Vue-cli webpack移动端自动化构建rem的注意事项有哪些，下面就是实战案例，一起来看一下。

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 Les tutoriels sur Internet manquaient et étaient incomplets, et il m'a fallu beaucoup de temps pour comprendre. J'ai pensé à paramétrer manuellement le cssrem de vscode, mais je n'é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 à tout le monde pour automatiser la construction de rem pour les terminaux mobiles

1 Je n'entrerai pas dans les détails. en installant vue-cli, tout le monde devrait le savoir

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

Étape 1 : npm install px2rem-loader

Chapitre Partie 2 : Ajouter des objets sous webpack.base.conf.js Ici, j'utilise sass et je les modifie selon les règles suivantes. croyez 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'
   }
  ]
 }
}

La troisième partie Étape : ajoutez quelque chose aux plugins sous webpack.dev.conf.js Tout le monde doit faire attention à l'attribut remUnit, qui fait 40 px dans le fichier. cas d'Apple 5. Je l'ai défini sur 40 ici, et certaines personnes l'ont défini sur 80. La raison pour laquelle j'ai défini 40 ici est Lorsqu'il est utilisé avec hotcss, je parlerai de la quatrième partie de

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

 : C'est quelque chose que beaucoup de gens ne savent pas. Beaucoup de gens manquent simplement cette étape. Recherchez 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 est terminée pour l'instant.

Taille de police d'entrée : 40px

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

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

Je l'ai mis dans src/assets/js /Dedans, vous pouvez

introduire des méthodes selon vos habitudes Vous pouvez définir n'importe quel nom vous-même. Ici, j'ai changé hotcss.js en viewport.js

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

et vous avez terminé

Je crois que vous l'avez fait. maîtrisé 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 JS pour trouver l'élément maximum d'un tableau de type Nombre

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

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!