프로젝트에 Bootstrap을 설치하는 방법에 대해서 알아본다.
크게 CDN 과 PackageManager 으로 나누어 볼 수 있다.

CDN

index.html 파일 상단 title 태그 아래에 link, script 태그를 추가함.
bundler에는 popperjs까지 포함되어 있음.

<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous"></head>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>

PackageManager

본인이 사용하는 PackageManager에 맞는 명령어를 터미널에 입력하여 설치
각각의 component를 import해서 사용할 경우 popperjs 까지 추가로 설치가 필요함.

NPM
npm install bootstrap@next
npm i @popperjs/core

Yarn
yarn add bootstrap@next
yarn add @popperjs/core

각 파일에 코드 추가
(독립적인 component가 아닌 bundler로 활용할 경우)

main.scss @import "../node_modules/bootstrap//scss/bootstrap"
main.js import bootstrap from "bootstrap/dist/js/bootstrap.bundle";

🔍 js파일에서는 bootstrap으로 바로 접근 가능하지만, scss에서는 그렇지 못하므로 상대경로에 주의

• 2021.04.23 - 최초 작성

댓글 환영 질문 환영
by.protect-me