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

Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。

webpack

Webpack を使ってプロジェクトにBootstrapを組み込む方法を学習する。

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

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

 

JavaScriptのインポート(Importing JavaScript)

次の行をアプリケーションのエントリーポイント(通常は index.jsapp.js を使用)に追加して、BootstrapのJavaScriptをインポート:

import 'bootstrap';

また、必要に応じてプラグインを個別にインポートすることも可能:

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

BootstrapはjQueryPopperに依存している。これは peerDependencies プロパティで指定されており、npm install --save jquery popper.js を使用して、両方を package.json に追加する必要がある。

 

スタイルのインポート(Importing Styles)

コンパイル済みSassのインポート(Importing Precompiled Sass)

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

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

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

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

...
{
	test: /.(scss)$/,
	use: [{
		loader: 'style-loader', // CSSをページに挿入
	}, {
		loader: 'css-loader', // CSSをCommonJSモジュールに変換
	}, {
		loader: 'postcss-loader', // ポストCSSアクションを実行
		options: {
			plugins: function () { // post cssプラグインは、postcss.config.jsにエクスポート可能
				return [
					require('precss'),
					require('autoprefixer')
				];
			}
		}
	}, {
		loader: 'sass-loader' // SassをCSSにコンパイル
	}]
},
... 

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