I am learning Laravel and using Laravel 8 and Jetstream. While testing the application on XAMPP, the css does not load on login/register pages. The css link points to localhost/app/css location. It works fine if i use php artisan serve command but does not work on XAMPP. How do i correct the css pointer so that it will work with both the php artisan serve command as well as XAMPP?
CSS does not load in Laravel 8 + Jetstream on XAMPP
Viewed 7246
7 Answers
in public\mix-manifest.json, change:
"/js/app.js": "/js/app.js",
"/css/app.css": "/css/app.css"
to
"/js/app.js": "js/app.js",
"/css/app.css": "css/app.css"
this method works for me, plus it works with both XAMPP and artisan serve.
In resources\views\layouts\app.blade.php, change:
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
To:
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
This will be work in wamp or xampp.
if u change in public\mix-manifest.json file
"/js/app.js": "/js/app.js",
"/css/app.css": "/css/app.css"
to
"/js/app.js": "js/app.js",
"/css/app.css": "css/app.css"
it not work on file: /user/profile , for this u need ../
so u must do second option, but don't forget to change .js file also ! so in: resources\views\layouts\app.blade.php chage
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<script src="{{ mix('js/app.js') }}" defer></script>
to
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<script src="{{ asset('js/app.js') }}" defer></script>
and also don't forget to do same in file: resources\views\layouts\guest.blade.php chage
for me i comment this :
{{-- @vite(['css/app.css', 'resources/js/app.js']) --}}
& add this code :
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<script src="{{ asset('js/app.js') }}" defer></script>
It's really simple, you have to go to the path: YOUR PROJECT/resources/views/layouts, here you have to add these 2 lines in both files "app.blade.php" and "guest.blade.php"
incorrect
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<script src="{{ mix('js/app.js') }}" defer></script>
Right:
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<script src="{{ asset('js/app.js') }}" defer></script>
NOTE: If you don't have any lines, you have to add them.
I got the same problem, you just have to install Laravel Breeze
The first step, run the code below in the terminal
composer require laravel/breeze:1.9.2
Second step
php artisan breeze:install
Third step
npm install && npm run dev
Fourth step
php artisan migrate
Notes: Because you are using Laravel 8, when installing Laravel Breeze I recommend using version <1.9 (and below)
if you are using Laravel 9, just run
composer require laravel/breeze
add this code layouts/guest.blade.php file
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
Related