Webpack

Webpack を利用してプロジェクトに Bootstrap を組み込む方法を確認できます。

Bootstrap のインストール

npm を利用して、Bootstrap を Node.js モジュールとして インストール します。

JavaScript のインポート

この行をアプリのエントリポイント（通常は index.js または app.js）に追加して、Bootstrap の JavaScript をインポートします。

import 'bootstrap';

または、必要に応じて プラグインを個別にインポート することもできます。

import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/alert';
...

Bootstrap は peerDependencies プロパティに指定されている jQuery と Popper に依存しており、これは、npm install --save jquery popper.js を利用して package.json の両方を確実に追加する必要があることを意味します。

スタイルのインポート

プリコンパイルされた Sass のインポート

Bootstrap の完全な能力を活用し、ニーズに合わせてカスタマイズするには、ソースファイルをプロジェクトのバンドル処理の一部として使用します。

まず、独自の _custom.scss ファイルを作成し、それを使用して 組込みのカスタム変数 をオーバーライドします。次に、メイン Sass ファイルを使用してカスタム変数をインポートし、その後に Bootstrap をインポートします。

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

Bootstrap をコンパイルするには、必要なローダー（sass-loader、postcss-loader、Autoprefixer など）をインストールして使用する必要があります。最小限の設定で、webpack の設定にはこのルールまたは同様のルールが含まれる必要があります。

...
{
  test: /\.(scss)$/,
  use: [{
    loader: 'style-loader', // inject CSS to page
  }, {
    loader: 'css-loader', // translates CSS into CommonJS modules
  }, {
    loader: 'postcss-loader', // Run postcss actions
    options: {
      plugins: function () { // postcss plugins, can be exported to postcss.config.js
        return [
          require('autoprefixer')
        ];
      }
    }
  }, {
    loader: 'sass-loader' // compiles Sass to CSS
  }]
},
...

コンパイル済み CSS のインポート

または、次のようにプロジェクトのエントリポイントにこの行を追加するだけで、Bootstrap の使用可能な CSS を利用できます。

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

この場合、特別な変更を加えずに css に対する既存のルールを利用できます。ただし、webpack の設定が異なります。sass-loader は不要になり、style-loader と css-loader だけが必要になります。

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