how to load assets dynamically from resources folder to public folder and access them using asset() helper

Question

I have just installed laravel 8.x and when I tried to get to the login page errors shows up regarding files loading such as CSS or js but only the ones that are located in the resources folder, some suggested copying them from the resources folder to the public folder but it doesn't make any sense to me so I'm looking for a way that I can load files to the public folder same way the laravel does for other files such as view files

here is the way I'm accessing the files

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

my webpack.mix.js

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

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js').postCss('resources/css/app.css', 'public/css', [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
]);

I'm not having issues with that, the login and all the other pages are rendering just fine but it's not styled — anouar es-sayid, Mar 30 '21 at 14:20
that's just an example bro read the question carefully, I will repeat it again the problem is that neither the style or the js is loading — anouar es-sayid, Mar 30 '21 at 14:25
did you run this command `npm run watch` if you did then `view-source:chrome` and check the files are loaded or not and can you post your `webpack.mix.js` — Basharmal, Mar 30 '21 at 14:30
yeah i will do that in a minute , I'm updating my webpack.mx.js , I figured out that it might be the problem — anouar es-sayid, Mar 30 '21 at 14:36

score 0 · Answer 1 · answered Mar 30 '21 at 15:03

In your webpack.mix.js add the below code

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

mix.js('resources/js/app.js', 'public/js').vue().postCss('resources/css/app.css', 'public/css', [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
]);

Finally, you should reference your stylesheet in your application's primary layout template. Many applications choose to store this template at resources/views/layouts/app.blade.php. In addition, ensure you add the responsive viewport meta tag if it's not already present:

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="/css/app.css" rel="stylesheet">
</head>

and js like belwo

you can read about it here https://laravel.com/docs/8.x/mix#postcss

how to load assets dynamically from resources folder to public folder and access them using asset() helper

1 Answers1