清空libs.css和libs.js文件
我使用webpack编译了我的样式和脚本，但是我注意到libs.css和libs.js文件是空的，而我在app.cs和app.js文件中有条目。 这是我的npm设置：
： – 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" }
： – 资源文件夹的目录结构：
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
试试下面的代码…
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', './');
我认为所有的path应该是相对于项目的根（ webpack.mix.js ）。 尝试
mix.styles([ 'resources/assets/css/libs/animate.css', //... ], 'public/css/libs.css') mix.scripts([ 'resources/assets/js/libs/app.js', //... ], 'public/js/libs.js')
经过大量的研究，我可以使用laravel项目来确定空文件的原因。 正确的语法应该是这样的：
mix.js（'resources / assets / js / app.js'，'public / js / libs.js'）.sass（'resources / assets / sass / app.scss'，'public / css / libs.css' ）;
我应该指定目标文件，所以正确的语法将有点类似于：
“`
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();
“`
combine语法应该已经被用来组合我的javascript文件。
帮助来源：