如何使用nprogress與Aurelia路上的WebPack

Question

我已經創建了一個的WebPack新奧裏利亞項目，我想用我的自定義組件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(); 
    } 
    } 
} 

或更改你的CSS加載程序webpack.config.js。更多信息在這裏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" 
    ] 
    } 
]