CODEWITHSUNDEEP
laravelxampplaravel-jetstream
irshukhan
irshukhan

Reputation: 199

CSS does not load in Laravel 8 + Jetstream on XAMPP

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?

Upvotes: 3

Views: 12172

Answers (10)

Aminah Nuraini
Aminah Nuraini

Reputation: 19146

It happened to me because I forgot to run

npm install and npm run dev. As simple as that. The js and CSS file are not generated without it

Upvotes: 0

Ilham Ramadhan
Ilham Ramadhan

Reputation: 1

I use laravel 8. I just try to change my app blade like this

<link rel="stylesheet" href="{{ mix('css/app.css') }}">
        
@livewireStyles
        
<script src="{{ mix('js/app.js') }}" defer></script>

Then install npm install laravel-mix --save-dev

Then run npx mix

Upvotes: 0

Muhammad Awais
Muhammad Awais

Reputation: 1

replace this @vite(['resources/css/app.css', 'resources/js/app.js']) or this WITH in resources/views/layouts/app.blade.php resources/views/layouts/guest.blade.php

will work for both jetstram and breze if styling is not apear

Upvotes: 0

Dilshan Herath
Dilshan Herath

Reputation: 1

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>

Upvotes: 0

GigaTera
GigaTera

Reputation: 1252

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

Upvotes: 0

yassine dotma
yassine dotma

Reputation: 775

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>

Upvotes: 6

Isaac Torres
Isaac Torres

Reputation: 1

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.

Upvotes: 0

Pinky Yknip
Pinky Yknip

Reputation: 21

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

Upvotes: 1

ListerineBoi
ListerineBoi

Reputation: 141

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.

Upvotes: 8

Ubaid Ullah
Ubaid Ullah

Reputation: 71

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.

Upvotes: 7

Related Questions