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

【问题标题】：Aurelia webpack 4 - Failed loading required CSS file in runtimeAurelia webpack 4 - 在运行时加载所需的 CSS 文件失败
【发布时间】：2018-02-28 21:43:53
【问题描述】：

我对 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 - 只有一次提交，它可以工作）。

【问题讨论】：

你更新到 webpack 插件的新 3.0 rc 了吗？这些东西只有几天的历史，所以可能还有一些问题需要解决。
是的，我有。我使用的是3.0.0-rc.1 版本（我猜你的意思是aurelia-webpack 插件）。我认为这个问题与它无关，但我可能错了。

标签： javascript typescript webpack aurelia

【解决方案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 来源，并且应用了不正确的加载器。

【讨论】：

谢谢 :) 我的真实应用程序中没有它，但我将它添加到错误重现 repo 中。但你是对的，你的回答让我找到了真正的解决方案。