laravel8でCSSを読み込みたいです。

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
laravel8を使用してWebアプリを作成したいと考えています。
cssファイルをpublic/css/.css
とし、resources/view/.blade.php
の<html>タグ内に

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

ブラウザの開発者ツール内に

GET http://localhost/css/***.css net::ERR_ABORTED 404 (Not Found)

と出てきており参照している場所が違のではないかと考えていますが、これ以上試行錯誤の手を切らしてしまいました。
laravel初心者ですのでアホらしい質問かもしれませんが、どなたか知恵をお貸しください。

該当のソースコード

CSS
1h1 {
2    color: #364e96;/*文字色*/
3    border: solid 3px #364e96;/*線色*/
4    padding: 0.5em;/*文字周りの余白*/
5    border-radius: 0.5em;/*角丸*/
6  }

<!doctype html>
<html lang="ja">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="stylesheet" href="{{ asset('css/***.css') }}" type="text/css">    
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

試したこと

・参照しているのファイル名と実際のファイル名が一致しているか確認済み。
・publicフォルダ内にcssフォルダを作成しそこにcssファイルを作成していることを確認済み
・ブラウザのキャッシュとlaravel内のキャッシュ削除を試行済み。
・bladeテンプレート内の<link>タグでさまざまな変更を実施済み
asset→urlに変更
フォルダの名前をcss→いろいろ変更(参照の記述も併せて変更)

補足情報（FW/ツールのバージョンなど）

larlavel 8.77
ブラウザ：FireFox

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答2件

自己解決

すみません解決しました。
原因は環境にdockerを使用しており、nginxの設定でhtml、php以外のファイルが読み込まないようになっていたのが原因でした。

nginxのdefault.conf内に
location ~ .css$ {
add_header Content-Type text/css;
}

    location ~ .js$ {
            add_header  Content-Type    application/x-javascript;                  
    }

の記述をしていないのでcssファイルを読み込みに行っていませんでした。初歩的なミスでした。
まさかdockerに原因があったとは、、、、
コンテナを一度停止し、php artisan serveの開発サーバーではきちんとcssファイルが読み込まれたのでもしや
dockerの設定が悪いのではと思ったら当たりでした。。。いい勉強になりました。これからは気をつけたいと思います。

投稿2022/01/06 13:09

hrk2178

総合スコア10