Laravel 5.5でBootstrap4betaを使えるようにする

Larave5.5でBootstrap4betaを使えるようにする手順をメモしました。
吹き出しに使うPopperにも対応してます。
ちなみにVue.jsはデフォルトで読み込まれるようになっているようです。

以下のサイトを参考にしました。

  Configure Laravel 5.5 with Bootstrap 4

手順1. npmでインストール

まずプロジェクトルートに移動して、下記のコマンドを実行します。

npm install

Node.jsがインストールされていないときは、事前にyumなどでインストールします。

yum install nodejs

 

手順2. bootstrap4betaとpopperのインストール

同じくプロジェクトルートで下記のコマンドを実行して、bootstrap4betaとpopperをインストールします。

npm install --save-dev bootstrap@4.0.0-beta popper.js

 

手順3.  scssファイルの読み込み元ファイルの修正

resources/assets/sass/app.scssを開き下記のように修正します。

// Fonts
@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");

// Variables
@import "variables";

// Bootstrap
@import "node_modules/bootstrap/scss/bootstrap";

手順4. 基準フォントサイズの修正

resources/assets/sass/ _variables.scss を開き下記のように修正します。

// Typography
$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
$font-family-sans-serif: "Raleway", sans-serif;
$font-size-base: 1rem;
$line-height-base: 1.6;
$text-color: #636b6f;

 

手順5.  jsファイルの読み込み元ファイルの修正

resources/assets/js/bootstrap.js を開き下記のように修正します。

try {
    window.$ = window.jQuery = require('jquery');
    window.Popper = require('popper.js').default;
    require('bootstrap');
} catch (e) {}

 

手順6.  app.jsとapp.cssの生成

プロジェクトルートで下記のコマンドを実行してpublic/js/app.jsとpublic/css/app.cssを生成します。

npm run production

 

手順7. HTMLから読み込み

レイアウトbladeなどの中で下記のように記述し、app.jsとapp.cssを読み込みます。

<link href="/css/app.css" rel="stylesheet"/>
<script src="/js/app.js"></script>

 

手順8. 動作テスト

以下のHTMLをbladeの中に記載し、画面に表示します。

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
        
<script>
$(function () {
    $('[data-toggle="popover"]').popover();
});
</script>

赤いボタンが表示され、そのボタンを押したら次のように右側にポップアップが出現したら成功です。

 

以上で完了です。
面倒くさいので、早くbootstrap4の正式版が出て、デフォルトで組み込まれるようになると良いですね。