Wie so ich CSS-Dateien zu webpack hinzufügen, dass sie in Angular2 SPA verwendet werden können

Question

Ich versuche, eine Angular 2 SPA-Anwendung auf der ASPNETCORE-SPA-Vorlage in Visual Studio 2015

ich auch auf der Grundlage zu schaffen versuchen die kommerziellen DevExtreme-Widgets von DevExpress zu verwenden.

Ich habe es geschafft, das Widget im HTML zu erstellen, aber das CSS wird nicht angewendet und ich nehme an, dass es daran liegt, dass ich das CSS nicht korrekt in die Webpack-Konfigurationen einfüge und es nicht korrekt in die HTML/CSHTML-Dateien lade .

Ich bin neu in diesen Technologien und nachdem ich mich in Webpack umgesehen habe, konnte ich das CSS nicht richtig funktionieren lassen.

Bisher habe ich hinzugefügt die Linien:

import '../node_modules/devextreme/dist/css/dx.common.css'; 
import '../node_modules/devextreme/dist/css/dx.light.css'; 
import '../node_modules/devextreme/dist/css/dx.spa.css'; 

in meine main.ts Datei, da dies die Datei in dem Einstiegspunkt für die webpack.config ist:

entry: { 
    'main': './Client/main.ts' 
}, 

und ich habe zur webpack.config.js Datei hinzugefügt, um die CSS-Regel:

{ test: /\.css$/, loader: extractCSS.extract(['css']) }, 

aber ich erhalte eine Fehlermeldung:

Error: Module 'e:\sources\angular2-3\Application\Error: Module 'e:\sources\angular2-3\Application\node_modules\css\index.js' is not a loader (must have normal or pitch function). 

Ich Referenzierung dann auf die Schaltfläche mit dem folgenden:

<dx-button text="some text"></dx-button> 

Kann jemand mir irgendwelche Hinweise, wo ich falsch gehe?

Gibt es eine Möglichkeit zu sehen, ob das CSS korrekt gepackt ist?

Answer 1

Der einfachste Weg ist es, die CSS-Referenzen in den Anbieter Abschnitt der webpack.config.vendor.js hinzufügen wie folgt:

entry: { 
    vendor: [ 
     '@angular/common', 
     '@angular/compiler', 
     '@angular/core', 
     '@angular/http', 
     '@angular/platform-browser', 
     '@angular/platform-browser-dynamic', 
     '@angular/router', 
     '@angular/platform-server', 
     'angular2-universal', 
     'angular2-universal-polyfills', 
     'bootstrap', 
     'bootstrap/dist/css/bootstrap.css', 
     'es6-shim', 
     'es6-promise', 
     'jquery', 
     'zone.js', 
     'devextreme', 
     'devextreme-angular', 
     'devextreme/dist/css/dx.common.css', 
     'devextreme/dist/css/dx.light.css', 
    ] 
}, 

In diesem Fall brauchen Sie nicht zu verwenden, importieren Direktive.