Q&A
https://teratail.com/help/question-tips#questionTips12
https://teratail.com/help/question-tips
https://qiita.com/onkz/items/d609adf0891d810fe862
は読みましたか？
読んだ結果を本文に反映ください。解決のヒントを探れるかもしれません。
実現したいこと
初めてBreezeを使ってアプリケーションを作成していますが、cssを反映させることが出来ません。
ちなみにcssファイルはresource/css/app.cssのようなディレクトリになっています。
発生している問題・エラーメッセージ
cssファイルが反映されません。
!追記!
検証からコンソールを確認したところ下記の表示が出ました。
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) login.css:1 Failed to load resource: the server responded with a status of 404 (Not Found) signup.css:1 Failed to load resource: the server responded with a status of 404 (Not Found) signup.css:1 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) home.css:1 Failed to load resource: the server responded with a status of 404 (Not Found) login.css:1 Failed to load resource: the server responded with a status of 404 (Not Found)
該当のソースコード
app.blade.php
1<!DOCTYPE html> 2<html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <meta name="csrf-token" content="{{ csrf_token() }}"> 7 8 <title>【テスト】</title> 9 10 <!-- Fonts --> 11 <link rel="preconnect" href="https://fonts.bunny.net"> 12 <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" /> 13 14 <!-- Scripts --> 15 @vite(['resources/css/app.css', 'resources/js/app.js']) 16 17 <!--css--> 18 <link href="{{ asset('/css/app.css') }}" rel="stylesheet"> 19 <link href="{{ asset('/css/home.css') }}" rel="stylesheet"> 20 <link href="{{ asset('/css/login.css') }}" rel="stylesheet"> 21 <link href="{{ asset('/css/signup.css') }}" rel="stylesheet"> 22 23 </head> 24 <body class="font-sans antialiased"> 25 <div class="min-h-screen bg-gray-100"> 26 @auth 27 @include('layouts.navigation') 28 @else 29 @if (Route::has('login')) 30 <div class="sm:fixed sm:top-0 sm:right-0 p-6 text-right z-10"> 31 <a href="{{ route('login') }}" class="font-semibold text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white focus:outline focus:outline-2 focus:rounded-sm focus:outline-red-500">ログイン</a> 32 @if (Route::has('register')) 33 <a href="{{ route('register') }}" class="ml-4 font-semibold text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white focus:outline focus:outline-2 focus:rounded-sm focus:outline-red-500">ユーザー作成</a> 34 @endif 35 </div> 36 @endif 37 @endauth 38 39 <!-- Page Heading --> 40 @if (isset($header)) 41 <header class="bg-white shadow"> 42 <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8"> 43 {{ $header }} 44 </div> 45 </header> 46 @endif 47 48 <!-- Page Content --> 49 <main> 50 {{ $slot }} 51 </main> 52 </div> 53 </body> 54</html> 55
試したこと
下記のサイトの記述も試みたのですが、エラーが発生して反映させることが出来ませんでした。
!追記!
vite.config.jsのinput内に'resources/css/user.css', などを追記して見たりして@viteで指定したりもしたのですがエラーが発生して反映させれませんでした。
【Laravel9】Laravel Mixを使用しているプロジェクトでBreezeをインストールすると、js・css共に反映されない問題
!追記!
public/css/cssファイルにして<link href="{{ asset('/css/app.css') }}" rel="stylesheet">の書き方で複数のcssを反映させようとしたところ、コンソールのcssのNotFoundエラーは消えたのですがcssが反映されている様子はありません。
ちなみにroom/showページのbuttonタグの背景を赤に出来るかを試したのですが、反映されていませんでした。
【Laravel】CSSファイルの設置場所と読み込み方！publicとresourceの違い
補足情報（FW/ツールのバージョンなど）
PHP8
Laravel10
回答2件
0
自己解決
public/css/cssファイルというように構成を移行したところ、適応させることが出来ました。
投稿2024/05/01 20:15
総合スコア58
0
npm run devまたはyarn run devなどのコマンドをphp artisan serveとは別のターミナルで実行しつつ、表示確認されたらcssが反映されませんか？
多分ですがフロントエンド用のサーバーをnpm run devなどで立ち上げないと、laravelのバージョンによってはcssが反映されなかった気がします。違っていたらすいません
投稿2024/04/26 13:14
総合スコア36
すみません。
npm run devしつつphp artisan serveでテストサーバーを立ち上げたのですが、cssを適応させることが出来ませんでした。
下記のサイトの内容を参考にしてみたらどうでしょうか。cache関連で反映されていないかもしれません。既に試していたらすみません。
参考サイト：
（cache関連）
https://biz.addisteria.com/laravel_css_error/
（assetの読み込み関連）
https://terakoya.sejuku.net/question/detail/2492
下記の際とも含めてクエリパラメーター以外を試したのですが、ダメでした。
ですが今までresources内にcssファイルを入れていたので、そこは今まで間違っていました。
クエリパラメーターはcssファイルにもファイル形式名後に追記するのでしょうか？
それともファイル名の後にクエリパラメーターを入力する形でしょうか？
LaravelでCSSが反映されない時の4つの対処法 #Laravel勉強ログ
https://tekito-style.me/columns/laravel-css-changes
resources内にcssファイルがあるのは良いのではないかと思います。
クエリパラメータを書く場所に関してはファイル名自体はそのままでassetの引数にのみ後方に追記すれば良いと思います。
加えてですが、私のローカル環境ではapp.blade.phpで各cssを読み込むのではなくresouces/css/app.cssに@import文で読み込ませたところ通常のcssとtailwindCSSがどちらもうまく反映されました。
// resouces/css/app.css
@import url('./user.css'); //追記
@tailwind base;
@tailwind components;
@tailwind utilities;
bundleされる対象cssファイルがresouces/css/app.cssのみ指定されているようなので他のlinkタグで読み込んでいるcssファイルが無視されている状態のようです。
〜〜〜
@vite(['resources/css/app.css', 'resources/js/app.js'])
〜〜〜
参考になればと思います。
resources/css/app.cssで下記の書き方をしたのですが、こういう事でしょうか？
反映させれなかったので、聞いてみました。
@import url('./home.css')
@import url('./user.css')
@import url('./room.css')
@import url('./message.css')
@tailwind base;
@tailwind components;
@tailwind utilities;
またBreezeを使っているのがcssに影響しているのでしょうか？
下記のページ検証のコンソールから出たエラーを見ているのですが、resources/css/cssファイルの構成に戻したのですが、ファイル特定されないのはTailwind CSSの設定みたいなのが原因でしょうか？
GET https://***************************.vfs.cloud9.ap-northeast-1.amazonaws.com/room/css/app.css net::ERR_ABORTED 404 (Not Found)
進展がありましたので、質問に追記させて頂きました。
まだcssの反映は出来ていません。
teratailにログインしていなかったので質問を見逃していました。
解決されたようでおめでとうございます！
解決後で蛇足ですが、publicフォルダ下は本番環境などで実際にアクセスされるフォルダなので、自己解決法でうまくいったのではないかと思います。cloud9環境を利用しているようなのでcloud9起因の不具合だったのではないかと思います。npm run devだけでなくnpm run buildでpublicフォルダに出力する必要があったかもしれません。自分はcloud9環境ではなく素のローカル環境で試していたので質問に書いた方法で動いたのだと思います。
あらためて解決おめでとうございます！
あなたの回答
tips
プレビュー
