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.

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 — brombeer, Sep 26 '19 at 07:56
Please share the path of css you see in the Elements tab of developer tools. — Swaroop Deval, Sep 26 '19 at 08:34
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? — brombeer, Sep 26 '19 at 09:24
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 — Nico Haase, Apr 05 '20 at 07:36

score 66 · Accepted Answer · edited Feb 11 '21 at 12:28

66

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

edited Feb 11 '21 at 12:28

Community

1
1

answered Sep 26 '19 at 08:42

Habib Rayan

792
6
8

3

i have already downloaded & installed nodejs and run its commands as i mentioned commands in my question. still getting problem. – ganesh Sep 26 '19 at 08:48
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` – ganesh Dec 30 '19 at 05:11
1

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 Apr 05 '20 at 07:37
Replace vue with bootstrap for those who don't want to use vue – andromeda Feb 05 '21 at 16:09
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 – temo Dec 29 '21 at 13:58
Still missing both css and js from the public folder after running all this. Must be some changes made to Laravel as I've followed official docs and tutorials and each time it doesn't work. – user2924019 Jul 08 '22 at 15:49

kishan maharana · Answer 2 · 2021-02-12T04:11:30.810

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">

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. — George Tiganila, Feb 11 '21 at 21:08

score 8 · Answer 3 · edited Feb 04 '21 at 11:57

8

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

edited Feb 04 '21 at 11:57

Suraj Rao

29,388
11
94
103

answered Feb 04 '21 at 11:56

Abdul Samad Nizamani

93
2
4

score 6 · Answer 4 · answered Jan 23 '20 at 03:04

6

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

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

answered Jan 23 '20 at 03:04

Prafulla Kumar Sahu

9,321
11
68
105

score 3 · Answer 5 · answered Oct 19 '19 at 07:17

3

You can download these two files from here :

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.

answered Oct 19 '19 at 07:17

Abdullah

135
2
14

1

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 Apr 05 '20 at 07:38
1

app.css is also empty!, I filled it with bootstrap.min.css and now working Thank You for the answer – Hanifullah Jamalzai Dec 27 '20 at 04:06

Sabaoon Bedar · Answer 6 · 2021-05-14T18:21:34.923

You need to run the below commands for laravel 7.x.

Solution

First go to your project root folder C:\Whatever\Your_project_name>

      composer require laravel/ui

Try any of the below command according to your front-end framework.

      php artisan ui vue --auth
      php artisan ui bootstrap --auth
      php artisan ui react --auth

At the end don't forget to run

      npm install

If your User Interface is not working properly try below command.

      npm run production

If the above commands don't work for you.

Reason: The error is because there is no css code in the public/css/app.css when you have executed all the commands but still there would be no code in that folder.

Take the file or code from here https://github.com/sabaoonbedar/Css-File-For-Laravel-Developers/tree/master and place it in your project public/css/app.css OR create similar folders if don't exists.

score 2 · Answer 7 · answered Apr 15 '20 at 08:52

2

For me it was simply the npm run dev command. In my ubuntu 19.10, it has to run with sudo

answered Apr 15 '20 at 08:52

Neku80

361
4
16

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 – Hondaman900 Jan 26 '21 at 17:11
@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. – Neku80 Apr 01 '21 at 09:54

Ataur Rahman · Answer 8 · 2021-02-06T23:37:39.317

2

I tried following commands in laravel 8 and it works well, you can also give it a try.

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

edited Feb 06 '21 at 23:37

answered Feb 06 '21 at 23:22

Ataur Rahman

21
4

I fixed the problem with that code: `npm run production` Thank you @ataur-rahman – kadir Nov 14 '21 at 12:32

score 2 · Answer 9 · answered Jul 08 '21 at 06:26

2

You must compile packages use npm run watch command. after that you can run npm run dev

answered Jul 08 '21 at 06:26

Softgenies

101
1
3

score 1 · Answer 10 · answered Sep 01 '20 at 01:53

1

You need to clear the cache on your browser. To confirm that go into incognito mode and try your URL again. If it works then that's the problem.

answered Sep 01 '20 at 01:53

Lynx

1,462
5
32
59

score 1 · Answer 11 · edited Jun 13 '23 at 07:37

1

run

npm install
npm run dev
npm run watch for continues compiling the code

edited Jun 13 '23 at 07:37

Community

1
1

answered Feb 18 '21 at 04:29

Shebin KP

115
4

score 1 · Answer 12 · answered Jul 02 '21 at 15:18

It seems to me that your node.js version was outdated. Just update the Node.js and start from the beginning by installing the laravel ui and so on.

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

Hope it will fix the problem.

score 1 · Answer 13 · answered Aug 30 '21 at 14:57

I was facing the same issue CSS & js works with CDN links but not with default CSS. so there was files no CSS code in the public/css/app.css and js files so I copy and paste the code and files in the public directory from my another laravel directory and now that works fine.

score 1 · Answer 14 · edited Oct 28 '21 at 10:13

1

Run the below commands in your Laravel project.

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

edited Oct 28 '21 at 10:13

karel

5,489
46
45
50

answered Oct 28 '21 at 10:12

Faiz Urahman Jamshedi

31
5

score 0 · Answer 15 · edited Apr 17 '21 at 15:32

I face the same problem while implementing the composer require laravel/ui in laravel version 7 but I fixed it by following the below steps.

First :

Download nodejs
Install nodejs in your pc

Second : run this command

composer require laravel/ui

Once the laravel/ui package has been installed, you may install the frontend scaffolding using the ui Artisan command:

// Generate basic scaffolding...
php artisan ui bootstrap
php artisan ui vue
php artisan ui react

// Generate login / registration scaffolding...
php artisan ui bootstrap --auth
php artisan ui vue --auth
php artisan ui react --auth

To generate node_module folder inside your project run the below command

npm install

Once the dependencies have been installed using npm install, you can compile your SASS files to plain CSS using Laravel Mix. The npm run dev command will process the instructions in your webpack.mix.js file. Typically, your compiled CSS will be placed in the public/css directory:

npm run dev

some time you may need to run this command npm audit fix or npm audit fix --force to fix some packages if they required to be.

Maybe some time by running this command npm run dev or npm run watch it will show you an error like below.

@ dev C:\xampp\htdocs\Auth
 npm run development 
@ development C:\xampp\htdocs\Auth
mix
        Additional dependencies must be installed. This will only take a moment.
 
        Finished. Please run Mix again.
 
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ development: `mix`

jus run the npm run watch again it will start Mix █████████████████████████ emitting (95%) after the success the build will be succeeded too.

score 0 · Answer 16 · answered Jul 18 '21 at 13:30

0

This command working in my machine command.

npm run dev

answered Jul 18 '21 at 13:30

Siddharth Shukla

1,063
15
14

score 0 · Answer 17 · answered Aug 28 '21 at 06:38

0

   composer require laravel/ui

   php artisan ui vue
   npm install
   npm run dev

   php artisan ui vue --auth
   npm install
   npm run dev

You will have to call npm install and npm run dev for both scaffolding

answered Aug 28 '21 at 06:38

Bhuvanesh Goyal

1
1

score 0 · Answer 18 · answered Oct 11 '21 at 21:35

0

after install every thing try this

npm update vue-loader

answered Oct 11 '21 at 21:35

Ahmed Othman

311
1
6

score 0 · Answer 19 · answered Apr 15 '22 at 19:30

0

In my case, I just downloaded the latest version of nodejs and install it. After, just type npm run dev. And refresh your browser and good to go!! Cheers!!

answered Apr 15 '22 at 19:30

McJohn

1

1

Can you explain why you should do something like this? – Özgür Can Karagöz Apr 16 '22 at 00:36
@ÖzgürCanKaragöz it's because of version compatibility. So you need to update your nodejs version to latest version – McJohn Apr 17 '22 at 01:20

score 0 · Answer 20 · answered Aug 28 '22 at 06:51

0

you can use the styles and the script like this :

Style :

 <link href="/css/app.css" rel="stylesheet">

JS :

 <script src="/js/app.js"></script>

answered Aug 28 '22 at 06:51

Yahya Ayyoub

322
2
10

score -1 · Answer 21 · edited Apr 05 '20 at 07:33

-1

Run the command:

npm uninstall popper.js && npm i @popperjs/core

to remove the deprecated package and install their new Popper v2.

edited Apr 05 '20 at 07:33

סטנלי גרונן

2,917
23
46
68

answered Apr 05 '20 at 06:08

user13226151

1

1

Please add some explanation to your answer - if some pages work, and others don't, what exactly is changed through this? – Nico Haase Apr 05 '20 at 07:38

Ashiq Ullah · Answer 22 · 2021-06-22T18:18:37.477

-1

Public your CSS. I mean keep your CSS file in the public directory of your project. Your css file should be here at: yourprojectname\public\css\app.css

edited Jun 22 '21 at 18:18

answered Apr 24 '21 at 08:39

Ashiq Ullah

125
6

auth pages not getting css in laravel

22 Answers22

You need to run the below commands for laravel 7.x.

Linked