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, and I have entries in the app.cs and app.js. 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 the 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

After much research, I was able to use the laravel project to determine the reason for empty files. The correct syntax should be as follows:

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

I had to specify the destination file, so the correct syntax would be like:

`` ``

 const { mix } = require('laravel-mix'); mix .js('resources/assets/js/app.js', 'public/js/app.js') .js('resources/assets/js/bootstrap.js', 'public/js/app.js') .js('resources/assets/js/plugins/jquery.appear.js', 'public/js/plugins/jquery.appear.js') .js('resources/assets/js/plugins/jquery.backstretch.min.js', 'public/js/plugins/jquery.backstretch.min.js') .js('resources/assets/js/plugins/modernizr.js', 'public/js/plugins/modernizr.js') .combine([ '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/libs.js') .js('resources/assets/js/isotope/isotope.pkgd.min.js', 'public/js/plugins/isotope/isotope.pkgd.min.js') .sass('resources/assets/sass/app.scss', 'public/css/lib.css') .version(); 

`` ``

The syntax combine was to be used to merge my javascript files.

Help Source:

https://github.com/udoyen/blender

Answer 2

I think that all paths should belong to the root of the project (where webpack.mix.js is). Try

 mix.styles([ 'resources/assets/css/libs/animate.css', //... ], 'public/css/libs.css') mix.scripts([ 'resources/assets/js/libs/app.js', //... ], 'public/js/libs.js') 

Answer 3

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