Zenn
🎨

【Laravel】Laravel6.*にBootstrap4を導入する2つの方法

2021/02/11に公開
Bootstrap
Laravel
tech

summary

Laravel6.*にBootstrap4を導入する２つのやり方をまとめます。

environment

$ composer -V
Composer version 1.10.20 2021-01-27 15:41:06

$ php artisan --version
Laravel Framework 6.20.16

method

  • Laravelに直接組み込む
  • CDNから使う

Laravelに直接組み込む

Laravel6からデフォルトでBootstrapが使えなくなったのでlaravel/uiを使う。

laravel/uiをインストール

$ composer require laravel/ui

以下のようなエラーメッセージがでたらバージョン指定をして新しいバージョンからインストールできるか試していく。

Installation failed, reverting ./composer.json to its original content.

バージョン指定でインストール

// 3系
$ composer require laravel/ui:3.*

// 2系
$ composer require laravel/ui:2.*

// 1系
$ composer require laravel/ui:1.*

僕の環境では1系でやっとインストールできました。（調べたらLaravel6.*は1系しかインストールできないみたい）

laravel/uiがインストールできたら以下のコマンドを実行

$ php artisan ui bootstrap
Bootstrap scaffolding installed successfully.
Please run "npm install && npm run dev" to compile your fresh scaffolding.

出力結果にあるように以下のコマンドを実行

$ npm install && npm run dev
（略）
 DONE  Compiled successfully in 26448ms                                                                                                                             5:08:24 AM

       Asset      Size   Chunks             Chunk Names
/css/app.css   179 KiB  /js/app  [emitted]  /js/app
  /js/app.js  1.08 MiB  /js/app  [emitted]  /js/app

bladeファイルの<head>〜</head>の間にcssファイルを読み込むコードを書く。

app.blade.php
<head>
(略)
    <link href="{{ asset('/css/app.css') }}" rel="stylesheet">
(略)
</head>

CDNから使う

公式サイトからCDNを使うためのコードを<head>〜</head>の間に書く。

app.blade.php
<head>
(略)
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
(略)
</head>

reference

Discussion