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.??

Solution 1

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.

Solution 2

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

Comments

[Kamlesh Paul]

resources folder data you cannot access by asset() read this laravel.com/docs/8.x/mix

[sta]

You need to put it on /public directory, not /resources directory. Ex : /public/css/app.css then you can access {{ asset('css/app.css') }}

[New Bee 1]

@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]

@KamleshPaul- Is there any other way so that I can put css and js files in public folder and access it? Thank you

[Beaumont]

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?