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

Question

我用 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();
        }
    }
}

我在运行时遇到以下错误：Failed loading required CSS file: nprogress/nprogress.css

Answer 1

如果您通过 Aurelia CLI 生成项目，您应该有一个名为 aurelia_project/aurelia.json 的文件。在该文件中，有一个块 build.bundles.dependencies。您需要将以下内容添加到块中：

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

Answer 2

webpack 没有使用 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 装载程序。更多信息在这里 https://github.com/aurelia/webpack-plugin/issues/120

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

How do I use nprogress with aurelia webpack

aurelia