Q&A
npm install & npm run dev はしたのか？
それは正常に終了したのか？を確認してください
前提
PHPでWEBサイトを作るため、フレームワークのlaravelについて勉強を始めています。
実現したいこと
laravelのチュートリアルの登録、ログイン画面の表示
発生している問題・エラーメッセージ
該当のソースコード
resouces/views/layouts/guest.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>{{ config('app.name', 'Laravel') }}</title> 9 10 <!-- Fonts --> 11 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap"> 12 13 <!-- Scripts --> 14 @vite(['resources/css/app.css', 'resources/js/app.js']) 15 16 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> 17 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> 18 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> 19 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> 20 </head> 21 <body> 22 <div class="font-sans text-gray-900 antialiased"> 23 {{ $slot }} 24 </div> 25 </body> 26</html> 27
resouces/views/auth/register.blade.php
1<x-guest-layout> 2 <x-auth-card> 3 <x-slot name="logo"> 4 <a href="/"> 5 <x-application-logo class="w-20 h-20 fill-current text-gray-500" /> 6 </a> 7 </x-slot> 8 9 <!-- Validation Errors --> 10 <x-auth-validation-errors class="mb-4" :errors="$errors" /> 11 12 <form method="POST" action="{{ route('register') }}"> 13 @csrf 14 15 <!-- Name --> 16 <div> 17 <x-label for="name" :value="__('Name')" /> 18 19 <x-input id="name" class="block mt-1 w-full" type="text" name="name" :value="old('name')" required autofocus /> 20 </div> 21 22 <!-- Email Address --> 23 <div class="mt-4"> 24 <x-label for="email" :value="__('Email')" /> 25 26 <x-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required /> 27 </div> 28 29 <!-- Password --> 30 <div class="mt-4"> 31 <x-label for="password" :value="__('Password')" /> 32 33 <x-input id="password" class="block mt-1 w-full" 34 type="password" 35 name="password" 36 required autocomplete="new-password" /> 37 </div> 38 39 <!-- Confirm Password --> 40 <div class="mt-4"> 41 <x-label for="password_confirmation" :value="__('Confirm Password')" /> 42 43 <x-input id="password_confirmation" class="block mt-1 w-full" 44 type="password" 45 name="password_confirmation" required /> 46 </div> 47 48 <div class="flex items-center justify-end mt-4"> 49 <a class="underline text-sm text-gray-600 hover:text-gray-900" href="{{ route('login') }}"> 50 {{ __('Already registered?') }} 51 </a> 52 53 <x-button class="ml-4"> 54 {{ __('Register') }} 55 </x-button> 56 </div> 57 </form> 58 </x-auth-card> 59</x-guest-layout>
試したこと
ここに問題に対して試したことを記載してください。
以下のURLを参考にして修正を加えてみたが変化が起きなかった。
Laravelのインストールと環境構築【Laravel入門講座】
Laravel.36 Bootstrapインスト後のログインページ表示崩れ
初Laravel8にてjetstreamを導入した際に表示が崩れる
補足情報（FW/ツールのバージョンなど）
laravel 8
xampp v3.2.4
両方確認して見ましたが正常に終了してしました。
色々と列が表示された後
Laravel Mix v6.0.49
✔ Compiled Successfully in 1245ms
と表記されていました。
では、ブラウザの開発ツールを確認して、「ネットワークタブ」から app.css が正しく読み込みされているか404 が出ていたりしないかを確認しましょう。
ネットワークタブでFilterの横一覧にあるCSSをクリックしても何も表示されませんでした、確認する場所はここであっていますでしょうか？
大丈夫であれば、css読み取れていないということですよね。。。。
スクショでも貼ってくれないとあっているとも間違っているとも私は判断できませんよね？
見えていますでしょうか？貼れていると思うのですが見えていませんでしたらコメントお願いします。
変なブログを参考にしてる時点で間違い。初心者から見るとブログを書いてる人は詳しい人に見えるかもしれないけど実際にはブログの内容は間違いだらけでブログを書いてるのも初心者でしかない。参考にしてる情報が間違ってたら何をどうやっても間違った使い方しかできない。
「Laravelを使うときは常に最新の公式ドキュメントを見る」これ以外のことは全部不要。ドキュメントだけで理解できない場合はLaravel以前の基礎知識が足りてない。
開発ツールを開いてから一回リロードしないと表示されないよ
回答1件
0
ベストアンサー
viteでのコンパイル機能ですが、laravel9から増えたのでlaravel8だと使えないかもしれないですね。
コンパイル自体はうまくいってもbladeにviteディレクティブ存在してないパターンじゃないかな。
投稿2022/10/06 05:08
総合スコア157
中身の方確認させていただきます！！laravel9から増えたということは最初からやり直してlaravel9の方で構築したほうがよろしいですかね？？
あなたの回答
tips
プレビュー
