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

webpack(Webpack and bundlers)

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

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

Bootstrapのインストール(Installing Bootstrap)

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

 

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

次の行をアプリケーションのエントリーポイント(通常は index.jsapp.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-loaderpostcssOptions キーを使用するようになったので変更

コンパイル済みCSSのインポート(Importing Compiled CSS)

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

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

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

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