webpack(Webpack and bundlers)
Webpack または他のバンドラを使ってプロジェクトにBootstrapを組み込む方法を学習する。
※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
に追加する必要がある。
【変更履歴】
- 【v5.0.0-alpha1】
import 'bootstrap'
⇒import プラグイン名 from 'bootstrap'
(必要なプラグインが指定可能に)
- 【v5.0.0-beta1】
- Popper v2の対応により、追加コマンドが
npm install popper.js
からnpm install @popperjs/core
に変更
- Popper v2の対応により、追加コマンドが
- 【v5.1.1】
- 全てをインポートする方法を追加(JavaScriptインポートの使用法を明確にした)
スタイルのインポート(Importing Styles)
コンパイル済Sassのインポート(Importing Precompiled Sass)v5.2.0設定変更
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: () => {
[
require('autoprefixer')
];
}
}
}
}, {
// SassをCSSにコンパイル
loader: 'sass-loader'
}]
}
//...
【変更履歴】
- 【v5.0.0-alpha2】
- potcss-loaderで
postcssOptions
キーを使用するようになったので変更
- potcss-loaderで
- 【v5.2.0】
- JavaScriptの記述をES6(ES2015)に変更
コンパイル済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'
]
}
]
}
// ...