webpack（Webpack and bundlers）

※webpackについては、Webpackってどんなもの？(Qiita)を参照。

Bootstrapのインストール（Installing Bootstrap）

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

 

JavaScriptのインポート（Importing JavaScript）v5.1.1方法変更

次の行をアプリケーションのエントリーポイント（通常は index.js か app.js を使用）に追加して、BootstrapのJavaScriptをインポート：

設定例

全てをインポートコピーimport 'bootstrap';

// または、名前付きエクスポートをすべて取得して、さらに使用できるようにする
import * as bootstrap from 'bootstrap';

また、ほんのわずかなプラグインだけが必要な場合は、必要に応じてプラグインを個別にインポートすることもできる：

個別にインポートコピーimport Alert from 'bootstrap/js/dist/alert';

// または、必要なプラグインが指定できる
import { Tooltip, Toast, Popover } from 'bootstrap';

Bootstrapは、peerDependencies プロパティで指定されているPopperに依存している。これは、npm install @popperjs/core を使用して、必ず package.json に追加する必要がある。

 

スタイルのインポート（Importing Styles）

コンパイル済Sassのインポート（Importing Precompiled Sass）v5.0.0-alpha2設定変更

Bootstrapの可能性を最大限に活用し、ニーズに合わせてカスタマイズするには、プロジェクトのバンドルプロセスの一部としてソースファイルを使用。

まず、独自の _custom.scss を作成し、それを使用して組み込みカスタム変数を再定義する。次に、メインのSassファイルを使用してカスタム変数をインポートしてから、Bootstrapを実行：

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

Bootstrapをコンパイルするには、必要なローダー（sass-loader, Autoprefixer付きpostcss-loader）をインストールして使用することを確認しておくこと。最小限の設定で、webpackの設定にこのルールか同様のものを組み込む必要がある：

Bootstrap5.xの設定例 緑背景が変更箇所

JavaScript//...
{
  test: /\.(scss)$/,
  use: [{
    // CSSをページに挿入
    loader: 'style-loader', 
  }, {
    // CSSをCommonJSモジュールに変換
    loader: 'css-loader', 
  }, {
    // ポストCSSアクションを実行
    loader: 'postcss-loader',
    options: {
      // postcss 8.xには `postcssOptions`が必要;
      // postcss 7.xを使用する場合、キーをスキップ
      postcssOptions: {
        // post cssプラグインは、postcss.config.jsにエクスポート可能
        plugins: function () {
          return [
            require('autoprefixer')
          ];
        }
      }
    }
  }, {
     // SassをCSSにコンパイル
     loader: 'sass-loader'
  }]
}
//... 

コンパイル済CSSのインポート（Importing Compiled CSS）

または、プロジェクトのエントリーポイントに次の行を追加するだけで、Bootstrapで定義済のCSSを使うこともできる：

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

この場合、sass-loader にstyle-loaderとcss-loader だけを使用する必要がない場合を除いて、webpackの設定に特別な変更を加えることなく既存の css ルールが使える。

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