다음과 같이 재작성된 제목: VueJS의 부트스트랩 문제: app.scss가 로드되지 않고 b-alert 해제 가능 버튼이 예외를 표시함

Question

vuejs 프로젝트에서 부트스트랩을 처음 사용하는데, 두 가지가 명확하지 않습니다.

여기 vuejs 가이드의 부트스트랩을 따르고 app.scss를 생성해야 할 때까지 단계별로 추가했으며 이를 자산 폴더에 넣기로 결정하고 해당 파일을 main.js로 가져오면 긴 메시지가 표시됩니다. vuejs의 오류입니다.

두 번째 질문: 나는 app.scss에 대한 전역 스타일을 버리고(올바른 용어라면) 그냥 부트스트랩을 시도해보기로 결정했습니다. 가장 기본적인 예로 부트스트랩 놀이터에서 이 예제를 발견하고 이를 복사하여 내 In the vue 프로젝트에 붙여넣었습니다. .

이제 일부 버튼의 스타일을 확인했지만 결과는 이전에 언급한 웹사이트의 출력과 다릅니다.

내 닫기 버튼은 테두리와 X가 있는 회색이며 텍스트 왼쪽에 있습니다. 플레이그라운드 예제의 X 버튼은 텍스트 오른쪽에 있고 스타일이 올바르게 지정되었으며 테두리가 없고 색상이 녹색/파란색입니다.

이것은 아마도 매우 기본적인 내용일 것입니다. 그러나 누군가 제가 뭘 잘못하고 있는지 말해 줄 수 있다면 감사하겠습니다. 저는 문서를 따르고 해결책 없이 3시간 동안 솔직하게 검색했기 때문입니다.

Answer 1

위 댓글에서 Hiws가 지적했듯이 이는 잘못된 Bootstrap 버전으로 인해 발생할 수 있습니다. Bootstrap 5를 설치했을 때도 똑같은 문제가 있었고 Bootstrap 4로 전환했을 때 닫기 가능한 대화 상자가 예상한 대로 작동했습니다.