Wie kann ich nProgress mit aurelia webpack verwenden

Question

ich ein neues Projekt mit aurelia webpack erstellt haben, und ich möchte, dass meine benutzerdefinierte nProgress Komponente

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

bekomme ich folgende Fehler zur Laufzeit nutzen: Failed loading required CSS file: nprogress/nprogress.css

Answer 1

webpack nicht mit aurelia.json.

es nur wie folgt ändern:

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

oder CSS-Loader in webpack.config.js ändern. Weitere Informationen finden Sie hier https://github.com/aurelia/webpack-plugin/issues/120

Answer 2

Sie sollten eine Datei namens aurelia_project/aurelia.json haben, wenn Sie Ihr Projekt über Aurelia CLI generiert haben. In dieser Datei befindet sich ein Block build.bundles.dependencies. Sie müssen die folgende zum Block hinzuzufügen:

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