teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

4

誤字

2021/02/26 01:59

投稿

YukiTani
YukiTani

スコア19

title CHANGED
File without changes
body CHANGED
@@ -79,9 +79,9 @@
79
79
  今回理解できたこと。
80
80
  bootstrap、CSSのフレームワークをLaravelではデフォルトで使用してくれると思っていた。
81
81
  ダウンロードして記述を変える必要があるといことが理解できた。
82
+ 他の方法もあると思うので、今後は色々開拓していきたい。
82
83
 
83
84
 
84
-
85
85
  ### 補足情報(FW/ツールのバージョンなど)
86
86
  docker環境
87
87
  Laravel Framework 7.30.4

3

誤字

2021/02/26 01:59

投稿

YukiTani
YukiTani

スコア19

title CHANGED
File without changes
body CHANGED
@@ -72,7 +72,7 @@
72
72
  検証ツールには、
73
73
  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
74
74
 
75
- Chrome拡張が出しているもののようで、無害なら気にするひつようはないようです。
75
+ Chrome拡張が出しているもののようで、無害なら気にする必要はないようです。
76
76
 
77
77
  https://teratail.com/questions/269892
78
78
 

2

変更点、内容が全て保存出来ていなかった。

2021/02/26 01:58

投稿

YukiTani
YukiTani

スコア19

title CHANGED
File without changes
body CHANGED
@@ -36,9 +36,52 @@
36
36
  フロントエンドで使用するパッケージの管理をするもの(依存解決、一括インストールなど)
37
37
 
38
38
  これをやることで、エラーメッセージが解消されました。
39
- エラーは解消されましたが、表示は変わらずの状況
39
+ エラーは解消されましたが、表示は変わらずの状況→解決
40
40
 
41
+ 解決方法2:
42
+ bootstrapをダウンロード(Compiled CSS and JS)
43
+ ダウンロードしたファイルの中の”bootstrap.css”をpublic>css>に保存する。
44
+ ```php
45
+ <!DOCTYPE html>
46
+ <html lang="ja">
47
+ <head>
48
+ <meta charset="utf-8">
49
+ <meta name="viewport" content="width=device-width, initial-scale=1">
41
50
 
51
+ <!-- CSRF Token -->
52
+ <meta name="csrf-token" content="{{ csrf_token() }}">
53
+
54
+ <title>{{ config('app.name', 'Laravel') }}</title>
55
+
56
+ <!-- Scripts -->
57
+ <script src="{{ asset('js/app.js') }}" defer></script>
58
+
59
+ <!-- Fonts -->
60
+ <link rel="dns-prefetch" href="//fonts.gstatic.com">
61
+ <!-- Styles -->
62
+ ーーーーーーーーーーーーーーーーーーーーーー↓この記述に変更(<head>内にいれること)
63
+ <link rel="stylesheet" type="text/css" href="/css/bootstrap.css">
64
+ ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
65
+ </head>
66
+ ```
67
+ 参考記事 https://teratail.com/questions/241709
68
+
69
+ bootstrapのCSSがしっかり表示されました。
70
+ ![イメージ説明](54e2c8d94a32709a46bd1310492ea915.png)
71
+
72
+ 検証ツールには、
73
+ 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
74
+
75
+ Chrome拡張が出しているもののようで、無害なら気にするひつようはないようです。
76
+
77
+ https://teratail.com/questions/269892
78
+
79
+ 今回理解できたこと。
80
+ bootstrap、CSSのフレームワークをLaravelではデフォルトで使用してくれると思っていた。
81
+ ダウンロードして記述を変える必要があるといことが理解できた。
82
+
83
+
84
+
42
85
  ### 補足情報(FW/ツールのバージョンなど)
43
86
  docker環境
44
87
  Laravel Framework 7.30.4

1

変更点、内容が全て保存出来ていなかった。

2021/02/26 01:56

投稿

YukiTani
YukiTani

スコア19

title CHANGED
File without changes
body CHANGED
@@ -19,24 +19,26 @@
19
19
  my-laravel-app/resources/js/app.js
20
20
  require('./bootstrap');
21
21
  ```
22
- ```php
23
- my-laravel-app/resources/css/app.css
24
- ファイルのみで、記述なし(エラーで言われているファイルを作成)
25
22
 
26
-
27
- ```
28
-
29
23
  ### 試したこと
30
24
  404エラーは、クライアントからのリクエストしているページをWebサーバーが見つけられなかった時に返すHTTPステータスコード、リクエストが正しく処理できない状態ということなので、ページが存在しない、見つからない。ということなので、
31
25
  エラー表示で言われているファイルを作てみる。
32
26
  my-laravel-app/resources/css/app.css、(cssをつくり、app.cssファイル)作成
33
- エラー解消されず、
27
+ エラー解消さない →削除済
34
- ![イメージ説明](96af03ff87314e8af8e27df2c20c233f.png)
35
28
 
36
29
  cssが反映されないので、my-laravel-app/resources/views/layouts/app.blade.phpの確認
37
30
  →ミスタイプ、インデント、閉じタグのチェック、
38
31
 
32
+ 解決方法: https://readouble.com/laravel/7.x/ja/mix.html
33
+ Laravel Mixを使用する。
34
+ npm install コマンドを実行
35
+ npmとは、・Node Package Managerの略です。
36
+ フロントエンドで使用するパッケージの管理をするもの(依存解決、一括インストールなど)
39
37
 
38
+ これをやることで、エラーメッセージが解消されました。
39
+ エラーは解消されましたが、表示は変わらずの状況
40
+
41
+
40
42
  ### 補足情報(FW/ツールのバージョンなど)
41
43
  docker環境
42
44
  Laravel Framework 7.30.4