내용으로 건너뛰기 문서 내비게이션으로 건너뛰기
새로운 버전의 Bootstrap을 사용할 수 있습니다!

Parcel을 사용해서 Bootstrap을 프로젝트에 포함하는 방법에 대해 알아봅니다.

Parcel 설치

Parcel Bundler를 설치해주세요.

Bootstrap 설치

npm을 통해서 Node.js 모듈로 bootstrap을 설치해주세요.

Bootstrap은 peerDependencies 속성에 지정된 Popper에 의존합니다. 이것은 npm install @ popperjs/core를 사용하여 두 가지 모두를 package.json에 추가해야 한다는 것을 의미합니다.

모든 작업이 완료되면 프로젝트는 다음과 같이 구성됩니다:

project-name/
├── build/
├── node_modules/
│   └── bootstrap/
│   └── popper.js/
├── scss/
│   └── custom.scss
├── src/
│   └── index.html
│   └── index.js
└── package.json

JavaScript 불러오기

앱의 진입점 (일반적으로 src/index.js)에서 Bootstrap의 JavaScript를 가져옵니다. 모든 플러그인을 하나의 파일로 가져오거나 일부만 필요한 경우 개별적으로 가져올 수도 있습니다.

// Import all plugins
import * as bootstrap from 'bootstrap';

// Or import only needed plugins
import { Tooltip as Tooltip, Toast as Toast, Popover as Popover } from 'bootstrap';

// Or import just one
import Alert as Alert from '../node_modules/bootstrap/js/dist/alert';

CSS 불러오기

Bootstrap의 잠재력을 최대한 활용하고 필요에 맞게 사용자 지정하려면 프로젝트 번들링 과정의 일부로 소스 파일을 사용하세요.

자체 scss/custom.scss를 만들어서 Bootstrap의 Sass 파일을 불러오고 기본 제공되는 맞춤 변수를 재정의해주세요.

앱 빌드

</body> 태그로 닫기 전에 src/index.js를 포함시켜주세요.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <script src="./index.js"></script>
  </body>
</html>

package.json 수정

package.json 파일에 devbuild 스크립트를 추가해주세요.

"scripts": {
  "dev": "parcel ./src/index.html",
  "prebuild": "npx rimraf build",
  "build": "parcel build --public-url ./ ./src/index.html --experimental-scope-hoisting --out-dir build"
}

dev 스크립트 실행

http://127.0.0.1:1234를 통해서 앱에 접근할 수 있습니다.

npm run dev

앱 파일 빌드

빌드된 파일은 build/ 폴더 내에 있습니다.

npm run build