メインコンテンツへスキップ

webpack（Webpack and bundlers）

Webpack または他のバンドラを使ってプロジェクトにBootstrapを組み込む方法を学習する。

目次

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

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 に追加する必要がある。

【変更履歴】
  • 【v5.0.0-alpha1】
    • import 'bootstrap' ⇒ import プラグイン名 from 'bootstrap'（必要なプラグインが指定可能に）
  • 【v5.0.0-beta1】
    • Popper v2の対応により、追加コマンドが npm install popper.js から npm install @popperjs/core に変更

 

スタイルのインポート（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'
	}]
}
//...

【変更履歴】

  • 【v5.0.0-alpha2】
    • potcss-loaderで postcssOptions キーを使用するようになったので変更

コンパイル済み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'
      ]
    }
  ]
}
// ...