laravel-mix 生成空（0 字节）.css 文件，没有动态导入和 .extract

Posted 2023-02-22

【中文标题】laravel-mix 生成空（0 字节）.css 文件，没有动态导入和 .extract

【英文标题】：laravel-mix produces empty (0 bytes) .css files WITHOUT dynamic imports and .extract

【发布时间】：2020-02-06 20:59:44

【问题描述】：

我在不使用 .extract 和 import() 的情况下得到空的 .css 文件 当我运行npm run dev

我的 webpack.mix.js：

let mix = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js').sourceMaps()
    .js('resources/assets/js/admin.js', 'public/js').sourceMaps()
    .sass('resources/assets/sass/app.scss', 'public/css')
    .sass('resources/assets/sass/admin.scss', 'public/css');

mix.copyDirectory('resources/assets/img', 'public/img');

这里奇怪的是，如果我删除其中一个 .js 混合，它就可以工作。例如这有效：

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

这也有效：

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

但之后我需要生成 admin.js（或 app.js）。这不是很方便。 任何想法我做错了什么？

我的环境是：

Laravel Mix 版本：5.0.0 节点版本：11.0.0 NPM 版本：6.10.3 操作系统：macOS High Siera / Ubuntu 18.04 LTS

我确定我没有动态导入，因为我是从 laravel-mix v.3 升级的。但我也检查了我的代码。如果我有动态导入，我的示例都不起作用。

编辑： 我发现问题出在我的 admin.js 文件中：

import router from './router'

在 /router/index.js 中还有另一个导入：

import routes from './routes.js'

问题似乎出在 routes.js 文件中，如下所示：

const routes = [
    
        path: '/',
        component: resolve => require(['../views/admin/dashboard/dashboard.vue'], resolve),
        meta: 
            title: "Dashboard",
        
    ,
];
export default routes

但是，我仍然无法解释这里的动态导入在哪里？！？！？ 或者它是如何工作的：

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

【问题讨论】：

那么admin.js 正在使用动态导入

如果您声称它没有动态导入，那么在问题中包含您的 JS 文件代码不是明智之举吗？

@Saly3301，是的，似乎问题出在与 admin.js 相关的文件中，但它是如何工作的：mix.js('resources/assets/js/admin.js', 'public/js ').sourceMaps() .sass('resources/assets/sass/admin.scss', 'public/css'); ?

@Saly3301，抱歉，我提供了代码。

【参考方案1】：

我改变了这个：

component: resolve => require(['../views/admin/dashboard/dashboard.vue'], resolve),

到这里：

component: require('../views/admin/dashboard/dashboard.vue').default,

现在它可以工作了。这篇文章很有帮助：What exactly is Hot Module Replacement in Webpack?