应该不算是我姿势不对吧,网上不少人有这个问题:https://github.com/JeffreyWay/laravel-mix/issues/1914。
其实代码非常简单,如果是这样:
JavaScript代码
- mix
- .js('resources/front/visitors/visitors.js', 'public/js')
- .sass('resources/front/visitors/sass/visitors.scss', 'public/css')
那就一切正常。如果加了这么一行:
JavaScript代码
- mix
- .js('resources/front/visitors/visitors.js', 'public/js')
- .sass('resources/front/visitors/sass/visitors.scss', 'public/css')
- .extract([....])
则生成出来的visitors.css为空文件。生成空文件的时候,还认为自己是从几个vue文件里做了提取。但事实上scss这个文件是孤立的。不含在vue里(确实是有一个提取vuestyle的参数,但我没设置),laravel-mix的作者居然说:No, answer is don't upgrade if you're using dynamic imports. See the Mix 4 release notes.
评论里有人说实在不行就分成两个js文件来处理吧。嗯,事实上我也这样做了,比如我我因为前后台分开,就这么折腾的,但也会带来问题,比如,后一个生成的manifest.json会覆盖前面的(如果你不用{{mix()}}函数,那不会遇到这个问题,因为你不用它。。。但如果你用了,就会遇到各种不同的小问题,除非你放在一个mix.js文件里,只是用路由来解决)
最后我确实是分拆了,利用了concurrently,直接加了一个scripts:
JavaScript代码
- {
- "start":"concurrently \"npm:watch*\""
- }
执行npm run start,就OK了。如果你不想看完整的输出。上面的scripts中可以改成:
JavaScript代码
- {
- "start":"concurrently -r \"npm:watch*\""
- }
是的,你没有看错,就加了一个-r的参数