Aurelia webpack 4 - 在运行时加载所需 CSS 文件失败

Question

我在使用 webpack 和 aurelia 时遇到了一个很奇怪的问题。

我根据网络和官方的webpack和aurelia文档做了新的webpack配置。编译工作，一切似乎都很好。但在运行时，我收到此错误：

css-resource.js?ada4:17 Uncaught (in promise) Error: Failed loading required CSS file: aurelia-notify/style.css
    at fixupCSSUrls (css-resource.js?ada4:17)
    at eval (css-resource.js?ada4:56)
    at <anonymous>

最初，我认为这可能是与此评论相关的问题：

// CSS required in templates cannot be extracted safely
// because Aurelia would try to require it again in runtime

这里提到：https://github.com/aurelia/skeleton-navigation/blob/master/skeleton-typescript-webpack/webpack.config.js#L70但好像不是。

在创建工作示例时，我有一个奇怪的发现。一切正常，直到我从以下依赖项加载 CSS 个文件之一：

  <require from="aurelia-bootstrap-datetimepicker/src/bootstrap-datetimepicker-bs4.css"></require>
  <require from="eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css"></require>

（请注意依赖项和错误消息 - 它们完全不相关）。

这里是示例存储库：https://github.com/klinki/aurelia-webpack-issue

（另请查看标签工作状态：https://github.com/klinki/aurelia-webpack-issue/tree/working-state - 仅提交一次即可正常工作）。

Answer 1

我解决了你的问题：

new ModuleDependenciesPlugin({
  'aurelia-testing': [ './compile-spy', './view-spy' ],
  // 'aurelia-notify': [ './style.css' ]
}),

首先这不是必需的，因为 AureliaPlugin 默认情况下在所有 HTML 文件上安装一个加载程序来检测和处理 <require> 依赖项。 style.css 需要来自 aurelia-notify 内某处的 HTML 模板。这是为您处理的，无需配置。

其次，这很糟糕，因为根据 CSS 依赖项是否来自 .html 内部（假设 Aurelia <require>），你的配置的其余部分设置了适当的加载程序或不（假设 JS import）。通过以这种方式使用 ModuleDependenciesPlugin，Webpack 没有看到依赖项的 .html 来源，并且应用了不正确的加载器。

Aurelia webpack 4 - 在运行时加载所需 CSS 文件失败

Aurelia webpack 4 - Failed loading required CSS file in runtime

javascript

typescript

webpack

aurelia