인프런 커뮤니티 질문&답변

흑후추님의 프로필 이미지
흑후추

작성한 질문수

Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"

프로젝트 구성 : Vite, ESLint, Prettier

부트스트랩 파일이 존재하지 않습니다.

작성

·

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 경로가 잘못된 경우에 발생합니다. 이러한 문제를 해결하기 위한 몇 가지 방법을 소개해 드립니다:

  1. 부트스트랩 패키지 설치 확인:

    • 먼저, bootstrap 패키지가 제대로 설치되어 있는지 확인해야 합니다. 다음 명령어를 터미널에서 실행하여 설치 상태를 확인해 주세요.
      
      npm install bootstrap
      

    • node_modules 디렉토리 아래에 bootstrap 폴더가 존재하는지 확인해 주세요.
  2. 패키지 버전 확인:

    • 부트스트랩 버전에 따라 bootstrap.min.css 파일의 위치가 다를 수 있습니다. package.json 파일에서 bootstrap의 버전을 확인하고, 공식 문서에서 해당 버전에 대한 사용법을 참조하세요.
  3. 올바른 import 경로 사용:

    • 당신의 코드에서 사용하는 경로와 실제 설치된 bootstrap 패키지 내의 경로가 일치해야 합니다.
    • 일반적으로 다음과 같이 import 할 수 있습니다:
      
      import 'bootstrap/dist/css/bootstrap.min.css';
      

    • 잘못된 부분이 없는지 확인하고, node_modules/bootstrap/dist/css/ 경로에 실제 파일이 있는지 확인하세요.
  4. 클린 빌드:

    • 만약 파일이 있는데도 문제가 지속된다면, 다음 명령어를 통해 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'
짐코딩님의 프로필 이미지
짐코딩
지식공유자

해결되어 다행이에요~! 해당 사항을 공유할 수 있도록 할게요!
감사합니다 🙇‍♂

흑후추님의 프로필 이미지
흑후추

작성한 질문수

질문하기