【Laravel】Bootstrap5を導入【Vite/Mix対応】

はじめに

今回は、LaravelにBootstrap5を導入する手順をまとめました。

Laravel Sailでの開発環境の構築方法は以下をご覧ください。

Windows

Laravel Sailで開発環境構築【Vite対応】

今回は、Laravel Sailを使って環境の構築を行いました。 SailはDockerですので、開発環境を簡単に用意することもできますし、カスタマイズすることも楽です。

Mac

【M1 Mac】Laravel Sailで開発環境構築【Vite対応】

Laravel Sailを使って環境の構築を行いました。 SailはDockerですので、開発環境を簡単に用意することもできますし、カスタマイズすることも楽です。

使用するバージョン

Windows 11 or macOS Monterey (M1)
Laravel Framework 9 or 10

2022/10/02 WindowsとMacを使い、最新バージョンで確認しました。
Vite版の対応を追加しました。
2023/03/11 Laravel10で確認しました。

他にも私のブログで、Laravelについて解説している記事がありますのでご覧ください。

【紹介】個人開発

私の個人開発ですがQuiphaというサービスを開発しました。(Laravel, Vue3など)
良かったら、会員登録して動作を試してみて下さい。

また、Laravel 9 実践入門という書籍を出版しました。
Kindle Unlimitedを契約している方であれば、読み放題で無料でご覧いただくことができます。

是非多くの方に読んでいただき、Laravelの開発に少しでもお役に立てたら幸いです。

VS Codeの用意

VS Codeのインストール方法は、以下の記事にまとめましたのでご覧ください。

【VS Code】インストール手順を解説【Windows/M1 Mac対応】

今回はVS Codeのインストール手順を解説します。WindowsとMacのそれぞれ分けてまとめました。

設定方法は以下を参考にしてください。

【VS Code】オススメの設定・拡張機能・便利機能・ショートカット【Win/Mac対応】

私的に最初に行う設定や、拡張機能、よく使うショートカットや便利な機能をまとめてみました。

プロジェクトの作成

Sail を使いプロジェクトを作成します。

$ curl -s https://laravel.build/laravel-app-bootstrap | bash

「laravel-app-bootstrap」の部分はプロジェクト名ですので、任意で指定してください。

VS Code でプロジェクトを開きましょう。
これ以降は、VS Code のターミナルでコマンドを実行します。
Sail を起動します。

$ sail up -d

Bootstrapの導入

laravel/ui導入

まずはComposerを使い、laravel/uiパッケージを導入します。

$ sail composer require laravel/ui

次に、Bootstrapを導入します。

$ sail php artisan ui bootstrap

package.jsonにBootstrapが追加されます。
現時点で、Bootstrap 5.2.3でした

package.json

{
    "private": true,
...
    "devDependencies": {
...
        "bootstrap": "^5.2.3",
...
    }
}

NPMコマンドで、パッケージをインストールします。

$ sail npm install

Viteの場合

最新のLaravelでは、Laravel MixがViteへと置き換わりました。

jsファイルをビルドします。開発時ですのでdevを指定しました。

$ sail npm run dev

開発用のアセット(JS, CSS)は開発サーバー上に配置されます。

  VITE v3.1.3  ready in 285 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://172.23.0.7:5173/

  LARAVEL v9.32.0  plugin v0.6.1

  ➜  APP_URL: http://localhost

本番用にJS/CSSを出力する場合は、以下のコマンドを実行します。

$ sail npm run build

publicフォルダにファイルが出力されます。
本番環境へは、このファイルを配置しましょう。

JavaScriptの実装は不要です。
bootstrap.jsを確認すると、Bootstrapが読み込まれているのが分かります。

resources\js\bootstrap.js

import 'bootstrap';

app.scssも確認すると、Bootstrapが読み込まれているのが分かります。

resources\sass\app.scss

// Bootstrap
@import 'bootstrap/scss/bootstrap';

Viteに関しては、以下の記事をご覧ください。

【Laravel】Viteの使い方

LaravelでViteを使ってみました。

Laravel Mixの場合

CSSやJSファイルをビルドします。（開発用）

$ sail npm run dev

以下のメッセージが表示された場合は、もう一度「npm run dev」を実行します。

Additional dependencies must be installed. This will only take a moment.
 
Running: npm install resolve-url-loader@^5.0.0 --save-dev --legacy-peer-deps

Finished. Please run Mix again.

publicフォルダに、app.cssとapp.jsファイルが出力されます。

JavaScriptの実装は不要です。
bootstrap.jsを確認すると、Bootstrapが読み込まれているのが分かります。

resources\js\bootstrap.js

try {
    require('bootstrap');
} catch (e) {}

余談ですが、参考までにViteからLaravel Mixへ戻すこともできます。
以下の記事を参考にしてください。

【Laravel】ViteからLaravel Mixに戻す方法

Laravel標準のViteをLaravel Mixに戻す手順を解説しました。

画面の実装

viewを返すだけのルーティングを定義します。

routes\web.php

Route::get('/bootstrap', function () {
    return view('bootstrap');
});

テンプレートファイルを作成します。
最低限、Bootstrapが確認できる程度の実装を行いました。(Viteの場合)

resources\views\bootstrap.blade.php

<!doctype html>
<html>

<head>
    <meta charset='utf-8' />

    @vite(['resources/sass/app.scss', 'resources/js/app.js'])

    <style>
        body {
            padding-top: 70px;
        }
    </style>
</head>

<body>
    <header>
        <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
            <div class="container-fluid">
                <a class="navbar-brand" href="#">Bootstrapテスト</a>
            </div>
        </nav>
    </header>

    <div class="container">
        本文
    </div>
</body>

</html>

Laravel Mixの場合は、以下のようにします。

resources\views\bootstrap.blade.php

<!doctype html>
<html>

<head>
    <meta charset='utf-8' />

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

    <style>
        body {
            padding-top: 70px;
        }

    </style>
</head>

<body>
    <header>
        <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
            <div class="container-fluid">
                <a class="navbar-brand" href="#">Bootstrapテスト</a>
            </div>
        </nav>
    </header>

    <div class="container">
        本文
    </div>

    <script src="{{ mix('js/app.js') }}"></script>
</body>

</html>

ビルドし出力した、app.scss(app.css)とapp.jsを読み込んでいるのがポイントです。

以下のURLにアクセスします。

http://localhost/bootstrap

Bootstrapが適用されているのが確認できました。

LaravelアプリにBootstrapを適用

以下の記事で翻訳アプリを作成し、今回の手順でBootstrapを適用しました。
興味があれば参考にしてください。

【Laravel】翻訳アプリにデザイン適用【Bootstrap】

Laravelで作成したアプリケーションに、Bootstrapを使いデザインを適用します。

その他

初学者へ

Laravelを初めて触る方へ向け、手順やアドバイスをまとめました。

外部サーバーへ公開

作成したアプリは公開して使ってもらいましょう！
Laravelアプリケーションを外部公開する方法をまとめました。

脆弱性対策

脆弱性を抱えたアプリケーションの場合、攻撃を受ける可能性があり大変危険です。
作成したアプリケーションは、脆弱性対策も意識しましょう。

GitHubと連携

GitHubと連携する方法を解説しました。
プロジェクトの管理はGitHubを活用しましょう。

GitHub Copilot

GitHub Copilotを導入し、AIにコーディングをサポートしてもらうこともできます。

さいごに

今回は、Laravel9にBootstrap5を導入する手順をまとめました。
ぜひ試してみてくださいね。

他にも私のブログで、Laravelについて解説している記事がありますのでご覧ください。

コメントをどうぞコメントをキャンセル

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

投稿ルール

コメントは承認制となっており、管理人の判断で公開されます。
承認にはお時間をいただきます。(平日の日中は対応できません)
コメントを公開する際、内容を修正する場合があります。
ご質問の場合は、詳細な状況と内容を記載し、丁寧なコメントをお願い致します。
エラーメッセージだけではなく、各種バージョン、経緯、再現手順を記載ください。
記事とは無関係な内容やアバウトなど、その他の理由で承認されない場合があります。
必ずしも管理人が返信するわけではございませんのでご了承ください。

コメント ※

名前 ※

メール ※

日本語が含まれない投稿は無視されますのでご注意ください。（スパム対策）