sassが適用されません【Laravel】

実現したいこと

Laravelのauth(認証機能)を利用して認証機能を作成しているのですが、sassが適用されません。
過去にもこのような事例があったのですが、忘れてしまい、再度調べていたのですが、どうしても解決をしなかったので、たまらず質問させて頂きました、

前提

cmoposerコマンドから認証機能をインストールしました。

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

該当のソースコード

Layouts/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
7    <!-- CSRF Token -->
8    <meta name="csrf-token" content="{{ csrf_token() }}">
9
10    <title>{{ config('app.name', 'Laravel') }}</title>
11
12    <!-- Fonts -->
13    <link rel="dns-prefetch" href="//fonts.bunny.net">
14    <link href="https://fonts.bunny.net/css?family=Nunito" rel="stylesheet">
15
16    <!-- Scripts -->
17    @vite(['resources/sass/app.scss', 'resources/js/app.js'])
18</head>
19<body>
20    <div id="app">
21        <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
22            <div class="container">
23                <a class="navbar-brand" href="{{ url('/') }}">
24                    {{ config('app.name', 'Laravel') }}
25                </a>
26                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
27                    <span class="navbar-toggler-icon"></span>
28                </button>
29
30                <div class="collapse navbar-collapse" id="navbarSupportedContent">
31                    <!-- Left Side Of Navbar -->
32                    <ul class="navbar-nav me-auto">
33
34                    </ul>
35
36                    <!-- Right Side Of Navbar -->
37                    <ul class="navbar-nav ms-auto">
38                        <!-- Authentication Links -->
39                        @guest
40                            @if (Route::has('login'))
41                                <li class="nav-item">
42                                    <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
43                                </li>
44                            @endif
45
46                            @if (Route::has('register'))
47                                <li class="nav-item">
48                                    <a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
49                                </li>
50                            @endif
51                        @else
52                            <li class="nav-item dropdown">
53                                <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
54                                    {{ Auth::user()->name }}
55                                </a>
56
57                                <div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
58                                    <a class="dropdown-item" href="{{ route('logout') }}"
59                                       onclick="event.preventDefault();
60                                                     document.getElementById('logout-form').submit();">
61                                        {{ __('Logout') }}
62                                    </a>
63
64                                    <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
65                                        @csrf
66                                    </form>
67                                </div>
68                            </li>
69                        @endguest
70                    </ul>
71                </div>
72            </div>
73        </nav>
74
75        <main class="py-4">
76            @yield('content')
77        </main>
78    </div>
79</body>
80</html>

試したこと

！追記！
解答を参考にして下記のサイトの手順を試しました。
認証機能は追加出来たのですが、相変わらずデザインは崩れてしまいました。
現状のデザインは上記の画像を張り替えました。

スターターキット
 5分でできる！Laravel Breezeで簡単ログイン機能導入

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

PHP8
Laravel10

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

回答1件

ベストアンサー

laravel/uiをインストールしてること自体が間違い。互換のために一応残されてるだけなので新規では使わない。

最初にインストールするスターターキットはBreeze。
Breezeではcssはtailwindを使うのでsassは使わない。sassがどうとかなんて質問が出てくる時点で入り口を間違えている。
https://laravel.com/docs/10.x/starter-kits
Laravel Bootcampのチュートリアルを一通り見た方がいい。Laravel10ではこの説明だけが正しい。これと違うLaravelの使い方を教えてる情報は全部古い。
https://bootcamp.laravel.com/blade/installation

投稿2024/02/24 01:09