jetstreamのレイアウト崩れ

Question

前提・実現したいこと

こちらの方と全く同じ状況です。

https://teratail.com/questions/321487

色々なサイトを見て、jetstreamのインストールからphp artisan serve の入力まで、紹介されている通りに入力してもレイアウトが崩れてしまいます。

私が調べた限り、どのサイトにも下記の手順しか載っていませんでしたので全く同じことをしました。

https://blog.capilano-fw.com/?p=7827

データベースにテーブルを作成するところまでは確認が取れています。

初めてlaravelを使用しています。

解決のために必要な情報がありましたら追加いたしますので、レイアウトを直すためにご助力いただきたいです。

XAMPPを使用しています。

発生している問題・エラーメッセージ

Failed to load resource: the server responded with a status of 404 (Not Found) app.css:1
Failed to load resource: the server responded with a status of 404 (Not Found) app.js:1
Failed to load resource: the server responded with a status of 404 (Not Found) app.css:1

該当のソースコード

app.css

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';


app.js

require('./bootstrap');

require('alpinejs');

試したこと

https://readouble.com/laravel/8.x/ja/mix.html

上記サイトのtailwind css の項目も試してみましたが、改善されませんでした。

同じ状況の方の回答にあったバーチャルホストの設定を試してみたのですが、どこかで間違えたのか、アクセスすらできなくなったので慌てて元に戻しました。
ここが原因なのか判断できないので、変に弄らずに皆様から意見をいただいて必要なら再チャレンジしてみようと考えました。

Answer 1

• npm run dev を行ったか
• その結果pp.cssおよびapp.jsが生成されたかどうか
• 生成されていない場合、npm run dev でエラーが表示されてないか
• エラーが表示されている場合、エラーを読み解きましょう

Comments

[退会済みユーザー]

回答ありがとうございます。

１、行いました。
２、生成されました。
３、エラーは出ておりません。
４、同上です。

[mikkame]

おそらくクロームデベロッパーツールのネットワークタブに実際にどのURLが404か
というのが買いてあると思うので今見ているURL、パスと一致しているかどうか確認してみてください

Answer 2

自分も同様の現象になったことがあります。
その時は、サブディレクトリへのインストールでCSSへの正しいURLが取得できていないことでしたので、取り敢えず以下の対応で逃げました。
resources/views/layouts/guest.blade.php
resources/views/layouts/app.blade.php
上記ファイルにおいて、

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

の部分を

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

のように修正しました。
ご参考になれば幸いです。

Answer 3

.envのAPP_URL。
APP_URLと実際のURLが違うなら当然404。