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

webpack(Webpack and bundlers)

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

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

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

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

 

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

次の行をアプリケーションのエントリーポイント(通常は index.jsapp.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 に変更
  • 【v5.1.1】
    • 全てをインポートする方法を追加(JavaScriptインポートの使用法を明確にした)

 

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