3

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?

irshukhan
  • 169
  • 2
  • 2
  • 12
  • have you place them in /public/css ? – Abilogos Dec 09 '20 at 08:55
  • @Abilogos As far as i understand, these assets are automatically published to the public directory after running npm run dev. Also, the css loads properly if i execute it with the php artisan serve command. The problem only exists with XAMPP as the link points to localhost/css/app.css whereas for XAMPP it should point to localhost/myapp/public/css/app.css. – irshukhan Dec 09 '20 at 09:03
  • 2
    "_it should point to localhost/myapp/public/css/app.css_" The `public` folder should not show up in the URL, it should be the DocumentRoot. Best would be to set up a vhost on Apache, like `project1.local` and point it to your projects public folder. Make sure your `APP_URL` in `.env` is set correctly – brombeer Dec 09 '20 at 09:06
  • Try `npm install` and `npm run dev`. I had a similiar issue and solved it by this 2 commands. – Marinario Agalliu Dec 09 '20 at 09:11
  • @brombeer Thank you very much! Setting up a vhost solved the problem. – irshukhan Dec 09 '20 at 09:29
  • i have the same problem... i've changed the .env APP_URL from http://localhost to http://localhost/public and httpd-vhost.conf from DocumentRoot "htdocs/PROJECT/pos" to DocumentRoot "htdocs/PROJECT/pos/public with no luck... did i miss something?" – Martin Christopher Apr 01 '21 at 00:38

8 Answers8

8

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.

ListerineBoi
  • 111
  • 1
  • 3
  • for some reason, every time I go to another page or rerun the project, it automatically puts the "/" again. so this was just a temporary solution for me. changing mix with asset as suggested below, worked for me – youHaveAlsoBeenABeginner Jun 21 '22 at 08:14
7

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.

Adrian Mole
  • 49,934
  • 160
  • 51
  • 83
Ubaid Ullah
  • 71
  • 1
  • 2
6

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>
yassine dotma
  • 697
  • 8
  • 10
1

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

Pinky Yknip
  • 11
  • 4
0

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.

Isaac Torres
  • 1
0

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
GigaTera
  • 782
  • 8
  • 9
0

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>
Dilshan Herath
  • 1
  • 2
0

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

Muhammad Awais
  • 1
  • 1
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Feb 18 '23 at 05:32