Bootstrap - NPM 프로젝트 생성

01.Bootstrap - NPM 프로젝트 생성

• 실제로 npm을 통해 프로젝트 환경에서 Bootstrap을 사용하는 방법에 대해 알아보도록 합니다.
• 이러한 환경설정을 통해 Bootstrap에서 필요한 기능만을 가져와서 사용할 수 있습니다.
• 또한 Boostrap에서 제공하는 기본 테마를 취향에 따라 커스터마이징할 수 있습니다.

1-1.package.json 파일 생성 & parcel-bundler 설치

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

$ npm init -y
$ npm i -D parcel-bundler

1-2.package-json 파일 수정

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

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

1-3.BootStrap 설치

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

$ npm install bootstrap

1-4.개발 서버 오픈

$ 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";