Laravel 8 サブディレクトリにアプリ設置 CSSが読み込めない

前回認証機能を作るところまではできましたが、表示が大きく崩れてしまう結果となりました。

原因はサブディレクトリにアプリを設置したことでCSS,JSが読み込めていないところまでは突き止めましたが、今回はその対処法をご紹介します。

CSS参照元を編集
1. urlで囲む
2. 確認してみる

CSS参照元を編集

        <!-- Styles -->
        <link rel="stylesheet" href="{{mix('css/app.css') }}">

        <!-- Scripts -->
        <script src="{{'mix('js/app.js') }}" defer></script>

サブディレクトリ(プロジェクト)にアプリを設置しているので本来なら
httl://hoge.com/サブディレクトリ(プロジェクト名)/app.css
となってほしいところですが、

これがサイトルート直下の
httl://hoge.com/app.css

を見ているっぽい。

とりあえず動かすために編集

        <!-- Styles -->
        <link rel="stylesheet" href="{{'../プロジェクト名'. mix('css/app.css') }}">

        <!-- Scripts -->
        <script src="{{'../プロジェクト名'. mix('js/app.js') }}" defer></script>

動いた。

けどダサいなぁ。一人プロジェクトだからいいけど、複数顧客に展開ってなったときにいちいちプロジェクト名をハードコーディングするのは美しくない。

というわけでいろいろ調べてみたところ、良い方法を見つけました。

urlで囲む

mix()をurl()で囲うというもの。

        <!-- Styles -->
        <link rel="stylesheet" href="{{ url(mix('css/app.css')) }}">

        <!-- Scripts -->
        <script src="{{ url(mix('js/app.js')) }}" defer></script>

mix()は相対パスを吐き出すのに対してurl()はアプリURLを絶対パスで吐き出すということだそうです。

下記を参考にさせていただきました。ありがとうございます。