Webpack과 번들러

// Webpack and bundlers

Webpack이나 다른 번들러를 사용하여 프로젝트에 Bootstrap을 포함하는 방법을 알아보세요.

Bootstrap 설치

npm을 사용하여 Node.js 모듈로 Bootstrap을 설치합니다.

JavaScript 불러오기

앱의 진입점 (일반적으로 index.js 또는 app.js)에 다음 줄을 추가하여 Bootstrap의 JavaScript를 불러옵니다:

// You can specify which plugins you need
import { Tooltip, Toast, Popover } from 'bootstrap';

또는 플러그인이 전부 필요하지 않다면 필요에 따라서 개별적으로 플러그인을 불러올 수 있습니다:

import Alert from 'bootstrap/js/dist/alert';
...

Bootstrap은 peerDependencies 속성에 지정된 Popper에 의존합니다. 이것은 This means that you will have to make sure to add it to your npm install @popperjs/core를 사용하여 package.json에 추가해야 함을 의미합니다.

스타일 불러오기

사전 컴파일된 CSS 불러오기

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

먼저 _custom.scss를 직접 만들고 이를 통해 기본 제공 커스텀 변수를 재정의합니다. 그런 다음에 메인 Sass 파일을 사용하여 커스텀 변수를 가져온 다음 Bootstrap을 사용합니다:

@import "custom";
@import "~bootstrap/scss/bootstrap";

Bootstrap을 컴파일하려면 필수 로더인 sass-loader 및 Autoprefixer와 postcss-loader를 설치하고 사용해야합니다. 최소한의 설정으로 webpack 구성에 다음 규칙 또는 유사한 규칙이 포함되여아 합니다:

// ...
{
  test: /\.(scss)$/,
  use: [{
    // inject CSS to page
    loader: 'style-loader'
  }, {
    // translates CSS into CommonJS modules
    loader: 'css-loader'
  }, {
    // Run postcss actions
    loader: 'postcss-loader',
    options: {
      // `postcssOptions` is needed for postcss 8.x;
      // if you use postcss 7.x skip the key
      postcssOptions: {
        // postcss plugins, can be exported to postcss.config.js
        plugins: function () {
          return [
            require('autoprefixer')
          ];
        }
      }
    }
  }, {
    // compiles Sass to CSS
    loader: 'sass-loader'
  }]
}
// ...

컴파일된 CSS 불러오기

프로젝트의 진입점에 이 줄을 추가하여 Bootstrap의 즉시 사용 가능한 CSS를 사용할 수도 있습니다:

import 'bootstrap/dist/css/bootstrap.min.css';

이 경우에는 webpack 구성에 대한 특별한 수정 없이 css에 대한 기존 규칙을 사용할 수 있습니다. 단, sass-loader는 style-loader 및 css-loader가 필요하지 않습니다.

// ...
module: {
  rules: [
    {
      test: /\.css$/,
      use: [
        'style-loader',
        'css-loader'
      ]
    }
  ]
}
// ...