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

Question

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

1.3k Views Asked by anouar es-sayid At 05 April 2025 at 05:29

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'),
]);

Original Q&A

There are 1 best solutions below

**Basharmal** · Answer 1

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

There are 1 best solutions below

Related Questions in LARAVEL

Related Questions in LARAVEL-HELPER

Trending Questions

Popular # Hahtags

Popular Questions