Fehlausrichtung des vue-cli3-Verpackungsstils

Mit der weit verbreiteten Verwendung von Vue.js in der Front-End-Entwicklung haben viele Entwickler damit begonnen, Vue CLI 3 zum Verwalten ihrer Vue-Projekte zu verwenden und Webpack zum Verpacken von Projekten für Produktionsumgebungen zu verwenden. Bei der Verwendung der Vue CLI 3-Paketierung können jedoch Probleme mit der Stilfehlausrichtung auftreten. In diesem Artikel wird untersucht, wie diese Probleme gelöst werden können.

1. Abhängigkeitsversionen überprüfen

Stellen Sie beim Packen mit Vue CLI 3 und Webpack sicher, dass die Versionen aller Abhängigkeiten aktuell und vorhanden sind Es gibt keine geringen Anforderungen für Vue CLI. Sie können die Vue CLI-Version mit dem folgenden Befehl überprüfen:

vue --version

und sicherstellen, dass die installierte Version 3.x.x ist.

Gleichzeitig stellen Sie bei der Verwendung von npm oder Yarn zum Installieren von Abhängigkeiten sicher, dass Sie die neuesten Versionen von Paketen verwenden, insbesondere Pakete, die sich auf CSS und Stile beziehen, wie z. B. Sass-Loader, CSS-Loader, usw.

2. Überprüfen Sie die CSS-Präprozessorkonfiguration.

Vue CLI 3 verwendet standardmäßig scss als CSS-Präprozessor. Wenn Sie einen anderen CSS-Präprozessor wie Less oder Stylus verwenden und dieser in der Projektkonfiguration nicht richtig eingerichtet ist, kann es zu falsch ausgerichteten Stilen kommen. Stellen Sie daher sicher, dass der CSS-Präprozessor in der Datei vue.config.js korrekt konfiguriert ist, zum Beispiel:

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',
        }
      }
    }
  }
}

In diesem Beispiel haben wir eine Option namens „less“ hinzugefügt und „modifyVars“ verwendet, um „Less“-Variablen zu verwenden in unsere Komponentendatei übergeben. Durch die richtige Konfiguration des CSS-Präprozessors in Vue CLI 3 können wir das Problem der Stilfehlausrichtung lösen.

3. Überprüfen Sie, ob globale Stile verwendet werden sollen.

In Vue-Projekten können wir globale Stile zur Anwendung auf Komponenten verwenden. Wenn wir unseren eigenen CSS-Selektor im globalen Stil verwenden, kann es zu Problemen mit der Stilfehlausrichtung kommen, da die Vue-Komponente möglicherweise in einem DOM-Element enthalten ist, für das ein CSS-Selektor definiert ist.

Um dieses Problem zu lösen, können wir CSS-Scoping verwenden, um den Stil der Komponente einzuschränken. Zu diesem Zweck können wir in der Vue-Einzeldateikomponente das Tag