'auth pages not getting css in laravel

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:^[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:^[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:^[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:^[4]

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.

Solution 5:^[5]

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 6:^[6]

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

Solution 7:^[7]

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

Solution 8:^[8]

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.

Solution 9:^[9]

run

npm install
npm run dev
npm run watch for continues compiling

Solution 10:^[10]

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.

Solution 11:^[11]

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

Solution 12:^[12]

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.

Solution 13:^[13]

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.

Solution 14:^[14]

This command working in my machine command.

npm run dev

Solution 15:^[15]

   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

Solution 16:^[16]

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.

Solution 17:^[17]

after install every thing try this

npm update vue-loader

Solution 18:^[18]

Run the below commands in your Laravel project.

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

Solution 19:^[19]

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

Solution 20:^[20]

Run the command:

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

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

Solution 21:^[21]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Community
Solution 2
Solution 3	Prafulla Kumar Sahu
Solution 4	Abdullah
Solution 5	Suraj Rao
Solution 6
Solution 7	Neku80
Solution 8	Lynx
Solution 9	Muhammad Dyas Yaskur
Solution 10	Sumon
Solution 11	Softgenies
Solution 12	marc_s
Solution 13
Solution 14	Siddharth Shukla
Solution 15	Bhuvanesh Goyal
Solution 16	Sajjad Ahmad
Solution 17	Ahmed Othman
Solution 18	karel
Solution 19	McJohn
Solution 20	×¡×˜× ×œ×™ ×’×¨×•× ×Ÿ
Solution 21

'auth pages not getting css in laravel

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]

Solution 10:[10]

Solution 11:[11]

Solution 12:[12]

Solution 13:[13]