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内的某个HTML模板中需要aurelia-notify。这是为您处理的，无需配置。

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