Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。
webpack
Webpack を使ってプロジェクトにBootstrapを組み込む方法を学習する。
Bootstrapのインストール(Installing Bootstrap)
npmを使用してNode.jsモジュールとして、Bootstrapをインストールする。
JavaScriptのインポート(Importing JavaScript)
次の行をアプリケーションのエントリーポイント(通常は index.js
か app.js
を使用)に追加して、BootstrapのJavaScriptをインポート:
import 'bootstrap';
また、必要に応じてプラグインを個別にインポートすることも可能:
import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/alert';
...
BootstrapはjQueryとPopperに依存している。これは 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-loader
にstyle-loaderとcss-loader だけを使用する必要がない場合を除いて、webpackの設定に特別な変更を加えることなく、既存の css
ルールを使うことが可能。
JavaScript...
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
...