如何将CSS文件添加到网页包中，以便在Angular2 SPA中使用

我正试图在Visual Studio 2015中基于ASPNETCORE-SPA模板创建Angular 2 SPA应用程序

我还尝试使用DevExpress的商业DevExtreme小部件

我已经设法在HTML中创建了小部件，但是CSS没有得到应用，我怀疑这是因为我没有在网页包配置中正确地包含CSS，也没有在HTML/CSHTML文件中正确地加载CSS

我是这些技术的新手，在浏览了网页后，我无法让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是否正确打包？

最简单的方法是将CSS引用添加到webpack.config.vendor.js的vendor部分，如下所示：

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

---

在这种情况下，您不需要使用import指令。

您使用angular cli吗？我基于它，并且有一个CSS文件，但我无法将其打包，因为我不确定将import语句放在哪里。我发现您应该安装一些软件包。这是官方文件。在我的例子中，我使用Angular cli，很容易将css文件包含到我的项目中。然而，当我添加一些外部js库和jQuery插件时，我发现了一些困难。