前提・実現したいこと
PHP(laravel)で掲示板を作成中
CSS、bootstrapが反映されないので、反映されるようにしたい。
発生している問題・エラーメッセージ
該当のソースコード
php
1my-laravel-app/resources/js/app.js 2require('./bootstrap');
試したこと
404エラーは、クライアントからのリクエストしているページをWebサーバーが見つけられなかった時に返すHTTPステータスコード、リクエストが正しく処理できない状態ということなので、ページが存在しない、見つからない。ということなので、
エラー表示で言われているファイルを作てみる。
my-laravel-app/resources/css/app.css、(cssをつくり、app.cssファイル)作成
エラー解消さない →削除済
cssが反映されないので、my-laravel-app/resources/views/layouts/app.blade.phpの確認
→ミスタイプ、インデント、閉じタグのチェック、
解決方法: https://readouble.com/laravel/7.x/ja/mix.html
Laravel Mixを使用する。
npm install コマンドを実行
npmとは、・Node Package Managerの略です。
フロントエンドで使用するパッケージの管理をするもの(依存解決、一括インストールなど)
これをやることで、エラーメッセージが解消されました。
エラーは解消されましたが、表示は変わらずの状況→解決
解決方法2:
bootstrapをダウンロード(Compiled CSS and JS)
ダウンロードしたファイルの中の”bootstrap.css”をpublic>css>に保存する。
php
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 7 <!-- CSRF Token --> 8 <meta name="csrf-token" content="{{ csrf_token() }}"> 9 10 <title>{{ config('app.name', 'Laravel') }}</title> 11 12 <!-- Scripts --> 13 <script src="{{ asset('js/app.js') }}" defer></script> 14 15 <!-- Fonts --> 16 <link rel="dns-prefetch" href="//fonts.gstatic.com"> 17<!-- Styles --> 18ーーーーーーーーーーーーーーーーーーーーーー↓この記述に変更(<head>内にいれること) 19 <link rel="stylesheet" type="text/css" href="/css/bootstrap.css"> 20ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー 21</head>
参考記事 https://teratail.com/questions/241709
検証ツールには、
DevTools failed to load SourceMap: Could not load content for http://localhost:8000/css/bootstrap.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
Chrome拡張が出しているもののようで、無害なら気にする必要はないようです。
https://teratail.com/questions/269892
今回理解できたこと。
bootstrap、CSSのフレームワークをLaravelではデフォルトで使用してくれると思っていた。
ダウンロードして記述を変える必要があるといことが理解できた。
他の方法もあると思うので、今後は色々開拓していきたい。
補足情報(FW/ツールのバージョンなど)
docker環境
Laravel Framework 7.30.4
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/02/25 09:26
2021/02/25 12:41
2021/02/26 01:57