부트스트랩 파일이 존재하지 않습니다.
421
작성한 질문수 11
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 할 수 있습니다:
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
32
0
unplugin-vue-components 질문드립니다.
0
37
2
강의듣다가 헷갈려서 질문드립니다.
0
31
1
와 짐코딩님 강의 들으면서 느끼는게 많네요.
0
32
1
질문드립니다.
0
32
2
라우터 인스톨 후 실행안됨
1
49
2
코드 자동 포매팅 질문
0
68
2
필터 watchEffect 질문입니다.
0
50
1
json-server 오류가 다른게 뜨네요
0
113
1
미리보기가 안됩니당...
0
69
2
unplugin-vue-components
0
81
2
TypeError 질문
0
52
1
v-model="show" :show="show" 같이 사용?
1
57
1
hash 모드 배포의 필요성?
0
61
2
.eslintrc.cjs 가 없습니다
0
95
2
title,content값이 비어서 저장되는데 제가 혹시 어떤 부분을 잘못 작성했는지 ㅜㅜ 알고싶습니다.
0
98
3
_title_like: "", 문의드려요 해당 값을 설정하면 list가 아에 안나옵니다.
0
64
1
@click.prevent="params._page = pageNum"> 에 .value를 안쓰는 이유가 궁금합니다.
0
71
2
중첩된 컴포넌트 문제
0
75
2
교안에 있는 부분이 아닌가요?
0
109
2
useAxios Proxy(Object) RefImpl
0
113
1
axios timeout
0
328
3
강의와 상관은 없지만, 궁금한 점이 있어 질문드립니다.
0
122
2
컴포넌트 분리 부분에서 오류가 나요ㅠㅠ
0
167
2