Tajuk ditulis semula sebagai: Isu Bootstrap dalam VueJS: app.scss tidak dimuatkan dan butang boleh diketepikan b-alert dipaparkan secara tidak normal

Question

Ini adalah kali pertama saya menggunakan bootstrap dalam projek vuejs saya dan terdapat dua perkara yang tidak jelas kepada saya.

Saya mengikuti bootstrap dalam panduan vuejs di sini dan menambah langkah demi langkah sehingga saya terpaksa mencipta app.scss dan saya memutuskan untuk meletakkannya dalam folder aset dan sebaik sahaja saya mengimport fail itu dalam main.js, saya akan mendapat panjang. ralat daripada vuejs.

Soalan kedua: Saya memutuskan untuk membuang gaya global untuk app.scss (jika itu istilah yang betul) dan hanya mencuba bootstrap, sebagai contoh paling asas, saya dapati contoh ini di taman permainan bootstrap dan saya menyalin dan menampalnya ke dalam projek In the vue saya .

Sekarang saya melihat penggayaan beberapa butang, tetapi hasilnya berbeza daripada output tapak web yang dinyatakan sebelum ini.

Butang tutup saya berwarna kelabu, dengan jidar dan X, dan berada di sebelah kiri teks. Butang X dalam contoh taman permainan berada di sebelah kanan teks, digayakan dengan betul, tidak mempunyai jidar dan hijau/biru.

Ini mungkin perkara yang sangat asas tetapi jika seseorang boleh memberitahu saya apa yang saya lakukan salah, saya akan berterima kasih kerana saya mengikuti dokumentasi dan mencari dengan jujur ​​selama 3 jam tanpa penyelesaian.

Answer 1

Seperti yang dinyatakan oleh Hiws dalam ulasan di atas, ini mungkin disebabkan oleh versi Bootstrap yang salah. Saya mempunyai masalah yang sama apabila saya memasang Bootstrap 5, dan apabila saya beralih kepada Bootstrap 4, dialog boleh ditutup bertindak seperti yang saya harapkan.