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

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

Answer 2

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

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

如何在aurelia webpack中使用nprogress

2 个答案: