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