Как добавить CSS файлы WebPack так, что они могут быть использованы в Angular2 SPA

Question

Я пытаюсь создать угловую приложение 2 SPA на основе шаблона ASPNETCORE-SPA внутри Visual Studio 2015.

Я также пытался использовать коммерческие виджеты DevExtreme от DevExpress.

Мне удалось создать виджет в HTML, но CSS не применяется, и я подозреваю, что это потому, что я не правильно вставляю CSS в конфигурации webpack и не загружаю его правильно в файлы HTML/CSHTML ,

Я новичок в этих технологиях и, оглядев веб-пакет, не смог заставить CSS работать правильно.

До сих пор я добавил строки:

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'; 

в мой main.ts файл, как это файл в точке входа для webpack.config:

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

и у меня есть добавлены правила CSS в файле webpack.config.js:

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

, но я получаю сообщение об ошибке:

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). 

Я затем ссылающийся на кнопку со следующим:

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

Может кто-нибудь дать мне какие-либо указатели, куда я иду неправильно?

Есть ли способ увидеть, правильно ли упакована CSS?

Answer 1

Самый простой способ, чтобы добавить ссылки CSS в поставщика сечения webpack.config.vendor.js следующим образом:

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', 
    ] 
}, 

В этом случае вам не нужно использовать импорт руководство.