auth pages not getting css in laravel

Question

I am beginner to laravel. I have created project. And I have run following commands to it.

composer require laravel/ui --dev
npm install
npm run dev
php artisan ui vue
php artisan ui vue --auth

after this command I get Login and Register menus on my welcome page. Now my laravel welcome page loads properly. But when I click on login it shows plain html. I serached and checked app.blade.php for links of css and js. It looks fine. layouts/app.blade.php having following links

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

Where should be the problem? Why Login and Register not getting css, when welcome page gets css? Please guide.

Solution 1

Step 1:

• Download nodejs
• Install nodejs in your pc

Step 2:

• then open your project root and command
• composer require laravel/ui
• php artisan ui vue --auth
• npm install
• npm run dev

After npm command it will generate node_module folder inside your project remove that folder.

npm command only for .css and .js file.

for help see this video: https://www.youtube.com/watch?v=hOYW3jqh19I&t=9s

Solution 2

The very simple solution for this problem is use the following cdn

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

instead of

<link href="{{ asset('css/app.css') }}" rel="stylesheet">

the links I have provided are the bootstrap cdn and check that . It will work and use

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

instead of

<link href="{{ asset('js/app.js') }}" rel="stylesheet">

Solution 3

Some times cache can be the issue in such case, you can run

php artisan cache:clear and optionally php artisan view:clear.

Solution 4

I tried following commands in laravel 8 and it works well

composer require laravel/ui
php artisan ui bootstrap
php artisan ui bootstrap --auth
npm install
npm run dev
npm run production

Solution 5

You can download these two files from here :

1. CSS File

2. JS File

Then create css and js folders into public folder just put :

CSS file : app.css into project_folder/public/css/

JS file : app.js into project_folder/public/js/

Its work for me. I think it will also work for you. Thanks.

View more solutions

Comments

[brombeer]

Can you access /css/app.css in your browser, does it get loaded? The Welcome page doesn't use a layout IIRC, it has styles embedded

[ganesh]

/css/app.css showing me blank page, no errors

[Swaroop Deval]

Please share the path of css you see in the Elements tab of developer tools.

[brombeer]

Your .css is empty? That's strange. (Just to be sure, you accessed http://localhost:8000/css/app.css in your browser? Or whatever the domain is you are serving your app from) I suppose you didn't get any errors when running npm run dev? Browser caching problem maybe?

[Nico Haase]

What have you tried to debug the problem? It should not be too hard to check which CSS paths are written to pages where it works, and those where it does not

[ganesh]

i have already downloaded & installed nodejs and run its commands as i mentioned commands in my question. still getting problem.

[ganesh]

I was running commands in wrong order as you can see in the question. Thats whys size of css file was zero. I guess Correct order of installing assets commands must be followed like ` composer require laravel/ui --dev, php artisan ui vue, php artisan ui vue --auth, npm install, npm run dev`

[Nico Haase]

Please add some explanation to your answer - if some pages work, and others don't, what exactly is changed through these two steps?

[Nico Haase]

Please add some explanation to your answer - if some pages work, and others don't, what exactly is changed through this?

[Nico Haase]

Please add some explanation to your answer - if some pages work, and others don't, what exactly is changed through these two steps?

[Hanifullah Jamalzai]

app.css is also empty!, I filled it with bootstrap.min.css and now working Thank You for the answer

[Hondaman900]

running DEV I get: [webpack-cli] /home/stephen/Websites/CNO/node_modules/laravel-mix/src/Mix.‌​js:18 static _primary = null; and a bunch of errors. Any ideas why or how to resolve this - I'm stuck

[andromeda]

Replace vue with bootstrap for those who don't want to use vue

[George Tiganila]

It worked, as it should.Is there any other way though? Like, my app.js and app.css are there in public, compiled from scss with npm run dev. But the paths from app.blade.php where exactly as those above, from your answer.

[Neku80]

@Hondaman900 If you still have this issue you should open a stackoverflow request, from the error code you said I don't know what it could be, maybe simply remove node_modules and do a fresh npm i.

[kadirerman]

I fixed the problem with that code: npm run production Thank you @ataur-rahman

[temo]

If npm run dev results in an error, or if says Please run Mix again. just run npm i vue-loader and you should be good to go

[Özgür Can Karagöz]

Can you explain why you should do something like this?

[McJohn]

@ÖzgürCanKaragöz it's because of version compatibility. So you need to update your nodejs version to latest version