désalignement du style d'emballage vue-cli3

Avec l'utilisation généralisée de Vue.js dans le développement front-end, de nombreux développeurs ont commencé à utiliser Vue CLI 3 pour gérer leurs projets Vue et à utiliser Webpack pour empaqueter des projets pour les environnements de production. Cependant, lors de l'utilisation du packaging Vue CLI 3, nous pouvons rencontrer des problèmes de désalignement de style. Cet article explique comment résoudre ces problèmes.

1. Vérifier les versions des dépendances

Lors de l'empaquetage avec Vue CLI 3 et Webpack, assurez-vous que les versions de toutes les dépendances sont à jour et ne sont pas inférieures aux exigences de Vue CLI. Vous pouvez vérifier la version de Vue CLI à l'aide de la commande suivante :

vue --version

et vous assurer que la version installée est 3.x.x.

Dans le même temps, lorsque vous utilisez npm ou Yarn pour installer des dépendances, assurez-vous d'utiliser les dernières versions des packages, en particulier les packages liés au CSS et aux styles, tels que sass-loader, css-loader, etc.

2. Vérifiez la configuration du préprocesseur CSS

Vue CLI 3 utilise scss comme préprocesseur CSS par défaut. Si vous utilisez un autre préprocesseur CSS, tel que less ou stylus, et qu'il n'est pas configuré correctement dans la configuration du projet, cela peut entraîner un mauvais alignement des styles. Assurez-vous donc de configurer correctement le préprocesseur CSS dans votre fichier vue.config.js, par exemple :

module.exports = {
  css: {
    loaderOptions: {
      less: {
        // 使用less的变量
        modifyVars: {
          // 或者您想使用jQuery和Bootstrap等的cdn链接
          'jquery':'jquery',
          'moment':'moment',
          'i18n':'vue-i18n',
          'bootstrap':'https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css',
        }
      }
    }
  }
}

Dans cet exemple, nous avons ajouté une option appelée less et utilisé submitVars pour transmettre la variable Less dans notre fichier de composant. En configurant correctement le préprocesseur CSS dans Vue CLI 3, nous pouvons résoudre le problème de désalignement des styles.

3. Vérifiez si vous devez utiliser des styles globaux

Dans les projets Vue, nous pouvons utiliser des styles globaux à appliquer aux composants. Si nous utilisons notre propre sélecteur CSS dans le style global, cela peut entraîner des problèmes de désalignement du style, car le composant Vue peut être inclus dans un élément DOM pour lequel un sélecteur CSS est défini.

Pour résoudre ce problème, nous pouvons utiliser le scoping CSS pour limiter le style du composant. Pour ce faire, dans le composant Vue à fichier unique, nous pouvons utiliser la balise 30e8033e360bcffb1ce9b4703e10b64c pour limiter le style CSS à s'appliquer uniquement au composant actuel.

<template>
  <div>
    // ...
  </div>
</template>

<script>
// ...
</script>

<style scoped>
  /* 在这里定义组件的样式 */
</style>

Déclarer des styles via des balises de portée limitera leur utilisation dans le composant actuel, évitant ainsi toute pollution de style globale ou toute introduction de styles de composants par d'autres éléments.

4. Vérifiez s'il y a des conflits de priorité de sélecteur

Lors de l'empaquetage avec Vue CLI 3, nous pouvons remarquer que certains sélecteurs CSS sont toujours remplacés par d'autres sélecteurs, ce qui peut conduire à des styles mal alignés.

Cela est généralement dû à des conflits de priorité de sélecteur. Dans les composants Vue, la priorité est déterminée par les facteurs suivants :

a) Sélecteur d'élément < Sélecteur de classe < si nous utilisons le même sélecteur dans un composant Vue avec la même priorité, le sélecteur défini ultérieurement remplacera le sélecteur défini en premier.

Pour résoudre ce problème, nous pouvons essayer d'utiliser des sélecteurs CSS plus spécifiques, augmentant ainsi leur priorité et garantissant qu'ils ne sont pas facilement remplacés par d'autres sélecteurs.

Vérifiez s'il y a d'autres conflits CSS

Enfin, nous devons vérifier si notre projet Vue est en conflit avec d'autres fichiers CSS. Cela peut être dû au fait que les règles CSS que nous utilisons dans le composant entrent en conflit avec les règles d'autres fichiers.
5. Pour éviter cela, nous pouvons utiliser des sélecteurs plus spécifiques dans les règles CSS. Nous pouvons également essayer d'utiliser différentes conventions de dénomination CSS, telles que BEM (Block Element Modifier) ​​​​ou ITCSS (Extensible Composable CSS Classes).

Dans le même temps, afin d'éviter les conflits, nous pouvons essayer d'utiliser des styles étendus pour remplir les styles dans les composants, ou utiliser CSS dans les solutions JS, telles que les modules CSS ou les composants stylisés.

Résumé :

Les méthodes ci-dessus permettent de résoudre le désalignement des styles dans l'empaquetage Vue CLI 3 en vérifiant les versions de dépendances, en vérifiant la configuration du préprocesseur CSS, en utilisant des styles globaux, en vérifiant les conflits de priorité des sélecteurs et en vérifiant d'autres conflits CSS. Ces méthodes peuvent également être appliquées aux problèmes de style liés au packaging Webpack d’autres applications Web. J'espère que ces méthodes vous aideront à résoudre des problèmes similaires pendant le développement.

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!