Bootstrap 프로젝트 시작

✅장점
npm을 이용한 환경설정을 통해 Bootstrap에서 필요한 기능만을 가져와서 사용할 수 있으며, Boostrap에서 제공하는 기본 테마를 취향에 따라 커스터마이징할 수 있습니다.

1. npm 시작

npm을 통해 package.json 파일을 생성하고 parcel-bundler를 설치를 및 개발 환경을 세팅해줍니다.

$ npm init -y

$ npm i -D parcel-bundler

package-json

"scripts": {
    "dev": "parcel index.html",
    "build": "parcel build index.html"
  },

2. bootstrap설치

bootstrap은 개발환경 뿐만 아니라 실제로 브라우저에서도 동작해야하므로 일반 의존성으로 설치해줍니다.

$ npm install bootstrap

3. bootstrap scss파일 과 js 파일 연결

main.js
import 키워드를 통해 bootstrap 모듈 내에 있는 bootstrap.bundle 파일을 선택해서 Popper.js라는 외부 패키지까지 합쳐서 번들로 프로젝트에 적용할 수 있습니다.

import bootstrap from 'bootstrap/dist/js/bootstrap.bundle'

main.scss 파일
마찬가지로 import 키워드를 통해 SCSS 파일 내에도 프로젝트에 적용할 수 있도록 설정해줍니다.

@import "../node_modules/bootstrap/scss/bootstrap";

※main.js에서는 node_modules에 설치가 된 bootstrap파일에 바로 접근을 할 수 있었지만, scss, css파일은 바로 node_modules에 접근을 할 수가 없기 때문에 상대경로로 정확하게 적어주어야합니다.

---

출처 : 패스트캠퍼스 한번에 끝내는 프론트엔드 개발 초격차 패키지 중