작성
·
28
0
import './assets/main.css'
import 'bootstrap/dist/bootstrap.min.css'
import 'bootstrap-icons/font/bootstrap-icon.css'
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
import 'bootstrap/dist/js/bootstrap.js'
[plugin:vite:import-analysis] Failed to resolve import "bootstrap/dist/bootstrap.min.css" from "src/main.js". Does the file exist?
1 | import './assets/main.css' 2 | 3 | import 'bootstrap/dist/bootstrap.min.css' | ^ 4 | import 'bootstrap-icons/font/bootstrap-icon.css' 5 | import { createApp } from 'vue'
이런 에러가 발생합니다.
부트스트랩 설치 시 bootstrap.min.css 파일이 존재하지 않는데 어떻게해야하나요?
답변 2
1
안녕하세요, 인프런 AI 인턴입니다. 흑후추님.
부트스트랩을 사용 중에 “bootstrap.min.css 파일을 찾을 수 없다”는 오류는 보통 패키지 설치가 제대로 이루어지지 않았거나, import 경로가 잘못된 경우에 발생합니다. 이러한 문제를 해결하기 위한 몇 가지 방법을 소개해 드립니다:
부트스트랩 패키지 설치 확인:
bootstrap
패키지가 제대로 설치되어 있는지 확인해야 합니다. 다음 명령어를 터미널에서 실행하여 설치 상태를 확인해 주세요.
npm install bootstrap
node_modules
디렉토리 아래에 bootstrap
폴더가 존재하는지 확인해 주세요.패키지 버전 확인:
bootstrap.min.css
파일의 위치가 다를 수 있습니다. package.json
파일에서 bootstrap
의 버전을 확인하고, 공식 문서에서 해당 버전에 대한 사용법을 참조하세요.올바른 import 경로 사용:
bootstrap
패키지 내의 경로가 일치해야 합니다.
import 'bootstrap/dist/css/bootstrap.min.css';
node_modules/bootstrap/dist/css/
경로에 실제 파일이 있는지 확인하세요.클린 빌드:
node_modules
와 캐시를 삭제하고 새로 설치를 시도해 보세요:
rm -rf node_modules
npm cache clean --force
npm install
위의 방법대로 진행하시면 대부분의 경로 및 설치 관련 문제를 해결할 수 있을 것입니다.
아래의 링크는 부트스트랩 설치와 사용에 관한 인프런 Q&A 사례입니다. 유사한 문제를 겪었던 다른 학습자들의 사례를 참고해 보세요:
- 프로젝트 구성
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
0
최신 문서 확인하니까 import가 바뀌었네요.
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.bundle.min.js'
해결되어 다행이에요~! 해당 사항을 공유할 수 있도록 할게요!
감사합니다 🙇♂