Titel umgeschrieben als: Bootstrap-Problem in VueJS: app.scss wird nicht geladen und die Schaltfläche zum Ausblenden von B-Alerts wird nicht normal angezeigt

Question

Dies ist das erste Mal, dass ich Bootstrap in meinem VueJS-Projekt verwende, und es gibt zwei Dinge, die mir unklar sind.

Ich folgte der Bootstrap-in-vuejs-Anleitung hier und fügte Schritt für Schritt hinzu, bis ich app.scss erstellen musste und beschloss, sie im Assets-Ordner abzulegen. Sobald ich diese Datei in main.js importiert habe, werde ich eine lange Datei erhalten Fehler von vuejs.

Zweite Frage: Ich habe beschlossen, die globalen Stile für app.scss aufzugeben (falls das die richtige Terminologie ist) und einfach Bootstrap auszuprobieren. Als einfachstes Beispiel habe ich dieses Beispiel im Bootstrap-Playground gefunden und es kopiert und in mein In-the-vue-Projekt eingefügt .

Jetzt sehe ich den Stil einiger Schaltflächen, aber das Ergebnis unterscheidet sich von der Ausgabe der zuvor erwähnten Website.

Meine Schließen-Schaltfläche ist grau, mit einem Rahmen und einem X und befindet sich links vom Text. Die X-Schaltfläche im Spielplatz-Beispiel befindet sich rechts vom Text, hat den korrekten Stil, hat keinen Rahmen und ist grün/blau.

Das sind wahrscheinlich sehr grundlegende Dinge, aber wenn mir jemand sagen könnte, was ich falsch mache, wäre ich dankbar, denn ich habe die Dokumentation befolgt und drei Stunden lang ehrlich gesucht, ohne eine Lösung zu finden.

Answer 1

正如Hiws在上面的评论中指出的那样，这可能是由于错误的Bootstrap版本导致的。当我安装了Bootstrap 5时，我遇到了完全相同的问题，当我改为使用Bootstrap 4时，可关闭的对话框就按照我预期的方式运行了。