我如何将nprogress与aurelia webpack一起使用

我已经用webpack创建了一个新的aurelia项目，我想使用我的自定义nprogress组件

import { bindable, noView } from 'aurelia-framework';
import * as nprogress from 'nprogress';

@noView(['nprogress/nprogress.css'])
export class LoadingIndicator {
    @bindable public loading = false;

    private loadingChanged(newValue): void {
        if (newValue) {
            nprogress.start();
        } else {
            nprogress.done();
        }
    }
}

---

我在运行时遇到以下错误：

加载所需CSS文件失败：nprogress/nprogress.CSS

如果通过aurelia CLI生成项目，则应该有一个名为

aurelia_project/aurelia.json

的文件。在该文件中，有一个块

build.bundles.dependencies

。您需要将以下内容添加到块中：

"dependencies": [
  ...,
  {
    "name": "nprogress",
    "path": "../node_modules/nprogress",
    "main": "nprogress",
    "resources": [
      "nprogress.css"
    ]
  }
]

---

网页包未使用

aurelia.json

只需将其更改如下：

import * as nprogress from 'nprogress';
import { bindable, noView } from 'aurelia-framework';

import 'nprogress/nprogress.css';

@noView()
export class LoadingIndicator {
  @bindable loading = false;

  loadingChanged(newValue) {
    if (newValue) {
      nprogress.start();
    } else {
      nprogress.done();
    }
  }
}

或者在

webpack.config.js

中更改css加载程序。更多信息请点击这里