Empty libs.css and libs.js files

Question

I compiled my styles and scripts using webpack, but I noticed that the libs.css and libs.js files are empty rather I have entries in the app.cs and app.js files. Here are my npm settings:

:- webpack.mix.js:

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

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


mix.styles([

           'libs/animate.css',
           'libs/animations.css',
           'libs/app.css',
           'libs/bootstrap-theme.css',           
           'libs/bootstrap.css',                    
           'libs/custom.css',
           'libs/font-awesome.min.css',
           'libs/head-custom.css',
           'libs/sb-admin-2.css',           
           'libs/sticky.css',
           'libs/style.css',



       ], './public/css/libs.css');


mix.scripts([

    'libs/app.js',
    'libs/bootstrap.js',
    'libs/custom.js',
    'libs/gmap.js',
    'libs/ipad.js',
    'libs/jquery.form.min.js',
    'libs/jquery.min.js',
    'libs/jquery.pjax.js',
    'libs/jquery.slim.min.js',
    'libs/myform.js',
    'libs/sb-admin-2.js',
    'libs/sb-admin-2.min.js',
    'libs/sticky.js',
    'libs/template.js',


], './public/js/libs.js');

mix.scripts([

    '/plugins/jquery.appear.js',
    '/plugins/jquery.backstretch.min.js',           
    '/plugins/modernizr.js',
    '/plugins/libs3/jquery.js',


], './public/js/plugins/plugins.js');


mix.scripts([

    '/libs/isotope.pkgd.js',

], './public/js/plugins/isotope/isotope.js');

:- mix-manifest.json:

{
  "/js/app.js": "/js/app.js",
  "/css/app.css": "/css/app.css",
  "./public/css/libs.css": "./public/css/libs.css",
  "./public/js/libs.js": "./public/js/libs.js",
  "./public/js/plugins/plugins.js": "./public/js/plugins/plugins.js",
  "./public/js/plugins/isotope/isotope.js": "./public/js/plugins/isotope/isotope.js"
}

:- Directory structure of resource folder:

resources/
├── assets
│   ├── css
│   │   └── libs
│   │       ├── animate.css
│   │       ├── animations.css
│   │       ├── app.css
│   │       ├── bootstrap.css
│   │       ├── bootstrap.min.css
│   │       ├── bootstrap-theme.css
│   │       ├── bootstrap-theme.min.css
│   │       ├── custom.css
│   │       ├── font-awesome.min.css
│   │       ├── head-custom.css
│   │       ├── sb-admin-2.css
│   │       ├── sb-admin-2.min.css
│   │       ├── sticky.css
│   │       └── style.css
│   ├── js
│   │   ├── app.js
│   │   ├── bootstrap.js
│   │   ├── components
│   │   │   └── Example.vue
│   │   ├── libs
│   │   │   ├── app.js
│   │   │   ├── bootstrap.js
│   │   │   ├── custom.js
│   │   │   ├── gmap.js
│   │   │   ├── ipad.js
│   │   │   ├── isotope.pkgd.js
│   │   │   ├── jquery.form.min.js
│   │   │   ├── jquery.min.js
│   │   │   ├── jquery.pjax.js
│   │   │   ├── jquery.slim.min.js
│   │   │   ├── myform.js
│   │   │   ├── sb-admin-2.js
│   │   │   ├── sb-admin-2.min.js
│   │   │   ├── sticky.js
│   │   │   └── template.js
│   │   └── plugins
│   │       ├── jquery.appear.js
│   │       ├── jquery.backstretch.min.js
│   │       ├── libs3
│   │       │   └── jquery.js
│   │       └── modernizr.js
│   └── sass
│       ├── app.scss
│       └── _variables.scss

Answer 1

Try this code below...

mix.styles(['resources/assets/css/libs/animate.css', 'resources/assets/css/libs/animations.css', 'resources/assets/css/libs/app.css', 'resources/assets/css/libs/bootstrap-theme.css', 'resources/assets/css/libs/bootstrap.css', 'resources/assets/css/libs/custom.css', 'resources/assets/css/libs/font-awesome.min.css', 'resources/assets/css/libs/head-custom.css', 'resources/assets/css/libs/sb-admin-2.css', 'resources/assets/css/libs/sticky.css', 'resources/assets/css/libs/style.css' ], 'public/css/libs.css', './');

mix.scripts(['resources/assets/js/libs/app.js', 'resources/assets/js/libs/bootstrap.js', 'resources/assets/js/libs/custom.js', 'resources/assets/js/libs/gmap.js', 'resources/assets/js/libs/ipad.js', 'resources/assets/js/libs/jquery.form.min.js', 'resources/assets/js/libs/jquery.min.js', 'resources/assets/js/libs/jquery.pjax.js', 'resources/assets/js/libs/jquery.slim.min.js', 'resources/assets/js/libs/myform.js', 'resources/assets/js/libs/sb-admin-2.js', 'resources/assets/js/libs/sb-admin-2.min.js', 'resources/assets/js/libs/sticky.js', 'resources/assets/js/libs/template.js' ], 'public/js/libs.js', './');