Search code examples
laravelsrc

laravel link to assets return 404 for src

image

I have this folder structure and I want to access the files inside resources. So im doing

<link href="{{ asset('sass/app.scss') }}" rel="stylesheet" />
<script src="{{ asset('js/app.js') }}" type="text/javascript"></script>

but it says not found so i thought i need to add resources so i tried

<link href="{{ asset('resources/sass/app.scss') }}" rel="stylesheet" />
<script src="{{ asset('resources/js/app.js') }}" type="text/javascript"></script>

Still i am getting status 404 for both files. enter image description here UPDATE:

I run this command: 

let mix = require('laravel-mix');

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');
Solution

  • tl;dr: You need to either run npm run dev, npm run watch or npm run prod to compile your assets to "usable" js/css files.

    You should never link to assets in your resources folder, they will not be available. Anything inside the public folder can be linked to.

    On your local/dev environment run npm run dev to compile your assets to the public folder (see webpack.mix.js in your project's root folder to know exactly what happens). If you happen to make a lot of changes you can run npm run watch instead so you don't have to type npm run dev after every change - your assets will automatically be compiled if changes are detected.

    Using the vanilla webpack.mix.js npm run dev will compile resources/assets/js/app.js to the public/js folder and resources/assets/sass/app.scss to the public/css folder, leaving you with public/js/app.js and public/css/app.css - those are the files you should link to in your .blade file:

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

    You can read more on the "Compiling Assets (Mix)" documentation link:

    https://laravel.com/docs/7.x/mix