Laravel5.5環境でBootstrap4を使ってみる #laravel5.5

概要

Laravel5.5をそのまま使うとBootstrap3のようなので、Boostrap4が使えないか調べてみた内容を残しておく。

Boostrap4インストール

package.jsonの内容を変更する。

package.json

...省略...

     "devDependencies": {
         "axios": "^0.17",
-        "bootstrap-sass": "^3.3.7",      <- 削除
+        "bootstrap": "^4.0.0",           <- 追加
+        "popper.js": "^1.14.7",          <- 追加
         "cross-env": "^5.1",
         "jquery": "^3.2",
         "laravel-mix": "^1.0",

...省略...

Bootstrapを切り替える (js)

Boostrap-sassから今回インストールしたBoostrap4へ切り替える。

resources/assets/js/bootstrap.js

...省略...

try {
    window.$ = window.jQuery = require('jquery');

    // require('bootstrap-sass');   // <- コメントアウト
    require('bootstrap');           // <- 追加
} catch (e) {}

...省略...

Boostrapを切り替える(css)

読み込むスタイルをBoostrap4のものに差し替える。

resources/assets/sass/app.scss

...省略...

@import "variables";

// Bootstrap
// @import "~bootstrap-sass/assets/stylesheets/bootstrap"; // <- コメントアウト
@import "~bootstrap/scss/bootstrap";                       // <- 追加

resources/assets/sass/_variables.scss

// Typography
$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
$font-family-sans-serif: "Raleway", sans-serif;
// $font-size-base: 14px;  // <- コメントアウト
$font-size-base: 1rem;     // <- 追加
$line-height-base: 1.6;
$text-color: #636b6f;

app.jsとapp.css生成

下記コマンドにてBoostrap4と依存関係のあるpopper.jsをインストールし、下記ファイルを生成する。

ターミナル

$ yarn install && yarn production

生成されるファイル

yarn.lock
public/mix-manifest.json
public/js/app.js
public/css/app.css

テスト

viewファイルをBoostrap4のHTMLに修正する。
https://getbootstrap.com/docs/4.3/getting-started/introduction/#starter-template

resources/views/welcome.blade.php

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    {{-- CSS --}}
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    {{-- JavaScript --}}
    <script src="{{ asset('js/app.js') }}"></script>
  </body>
</html>

動作確認

ちょっとわかりにくいですが、とりあえず問題なさそうです。

参考サイト

Bootstrap - Introduction