Vite + React 에서 React Bootstrap 사용하기

react-bootstrap 설치 후에 React Bootstrap 의 Pagination 을 사용하였으나 아래와 같이 나타났다.

css 가 정상 동작 하지 않는 것 같았다.

검색해보니 Vite 와 React Bootstrap 을 함께 사용하면 비슷한 상황이 많은 것 같다.

 

해결 방법은

1. bootstrap npm 설치

2. App.tsx 파일에 import 'bootstrap/dist/css/bootstrap.min.css'; 소스 추가

 

react-bootstrap 만 설치한 후 바로 사용했을 때는 css가 먹히지 않았는데,

bootstrap 설치하고 App.tsx 파일에 코드 추가하니 아래와 같이 정상 동작하였다.

 

---

npm 설치

npm i react-bootstrap
npm i bootstrap

App.tsx 파일

import Router from './shared/Router'
import 'bootstrap/dist/css/bootstrap.min.css';

function App() {
  return <Router />
}

export default App