webpack（Webpack and bundlers）

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

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

 

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

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

// 必要なプラグインが指定可能
import { Tooltip, Toast, Popover } from 'bootstrap';

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

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

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'
      ]
    }
  ]
}
// ...