Titre réécrit comme : Problème de bootstrap dans VueJS : app.scss ne se charge pas et le bouton de suppression de b-alert s'affiche anormalement

Question

C'est la première fois que j'utilise bootstrap dans mon projet vuejs et il y a deux choses qui ne me sont pas claires.

J'ai suivi le guide d'amorçage dans vuejs ici et je l'ai ajouté étape par étape jusqu'à ce que je doive créer app.scss et j'ai décidé de le mettre dans le dossier Assets et une fois que j'ai importé ce fichier dans main.js, j'aurai un long erreur de vuejs.

Deuxième question : J'ai décidé d'abandonner les styles globaux pour app.scss (si c'est la bonne terminologie) et d'essayer simplement bootstrap, comme exemple le plus basique, j'ai trouvé cet exemple dans le terrain de jeu bootstrap et je l'ai copié et collé dans mon projet In the vue. .

Maintenant, je vois le style de certains boutons, mais le résultat est différent de la sortie du site Web mentionné précédemment.

Mon bouton de fermeture est gris, avec une bordure et un X, et se trouve à gauche du texte. Le bouton X dans l'exemple du terrain de jeu se trouve à droite du texte, est correctement stylé, n'a pas de bordure et est de couleur vert/bleu.

C'est probablement des choses très basiques, mais si quelqu'un pouvait me dire ce que je fais de mal, je lui serais reconnaissant car j'ai suivi la documentation et j'ai cherché honnêtement pendant 3 heures sans solution.

Answer 1

Comme Hiws l'a souligné dans les commentaires ci-dessus, cela peut être dû à une mauvaise version de Bootstrap. J'ai eu exactement le même problème lorsque Bootstrap 5 était installé, et lorsque je suis passé à Bootstrap 4, la boîte de dialogue fermable s'est comportée comme je m'y attendais.