Laravel 8 is not loading css and js

Question

I have css under App/resources/css by default

when I open Login and Register page css is not loading. This is default css and js link on my app.blade.php

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

I did this

<link href="{{ URL::asset('assets/css/a.css') }}"  rel="stylesheet">

and also tried

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

What shall I do to make it work.??

resources folder data you cannot access by asset() read this laravel.com/docs/8.x/mix — Kamlesh Paul
– Kamlesh Paul, Commented Feb 1, 2021 at 10:42
You need to put it on /public directory, not /resources directory. Ex : /public/css/app.css then you can access {{ asset('css/app.css') }} — STA
– STA, Commented Feb 1, 2021 at 10:43
@sta:: I tried moving the css and js to public folder but nothing changes. I would be grateful If u provide ma a solution to access a css and js file. Thank You — New Bee 1
– New Bee 1, Commented Feb 1, 2021 at 10:46
@KamleshPaul- Is there any other way so that I can put css and js files in public folder and access it? Thank you — New Bee 1
– New Bee 1, Commented Feb 1, 2021 at 10:48

Dev Man · Accepted Answer · 2021-02-20 13:11:54Z

3

Move all your CSS and JavaScript to the public folder so that your structure becomes something like

public/
    |--- css/
    |---js/

Now to use your CSS and JavaScript from your new location do something like

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

This works because the asset() blade helper already looks from the public directory so you start your CSS and JavaScript URL construction from that point on

answered Feb 20, 2021 at 13:11

Dev Man

2,1473 gold badges24 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

HippoDuck Over a year ago

Shouldn't this happen automatically though? When you install the ui and auth, why doesn't it also move the css and js to /public?

codedge · Accepted Answer · 2021-02-01 15:17:46Z

2

I would recommend to always use the mix helper in Blade like this

<script src="{{ mix('/js/app.js') }}"></script>

as it additionally properly takes care of versioned assets. Please make sure you either ran npm run dev or npm run prod (see Compiling assets) to generate the public/css/app.css and public/js/app.js files from the ones located in resources.

edited Feb 1, 2021 at 15:17

answered Feb 1, 2021 at 10:59

codedge

5,1892 gold badges29 silver badges44 bronze badges

1 Comment

Beaumont Over a year ago

Hi, I am running into similar problem while deploying on Vercel. I have done npm run prod and I can see both css and js files in the public folder. I have deployed it but on the vercel link it shows 404 on both files. Any idea?

Collectives™ on Stack Overflow

Laravel 8 is not loading css and js

2 Answers 2

1 Comment

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Linked

Related