Bootstrap 프로젝트 시작

이번에는 실제로 npm을 통해 프로젝트 환경에서 Bootstrap을 사용하는 방법에 대해 알아보도록 합니다.

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

1.1 터미널 명령어 (1)

npm을 통해 package.json 파일을 생성하고 parcel-bundler를 설치해줍니다.

$ npm init -y

$ npm i -D parcel-bundler

1.2 package-json 파일

package-json 파일을 오픈하여 script 내에 아래와 같이 parcel 번들러를 이용하여 개발을 할 수 있도록 합니다.

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

1.3 터미널 명령어 (2)

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

$ npm install bootstrap@next

1.4 터미널 명령어 (3)

npm을 통해 개발 서버를 오픈해줍니다.

$ npm run dev

1.5 main.js 파일

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

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

1.6 main.scss 파일

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

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