如何将 CSS 文件添加到 webpack 以便它们可以在 Angular2 SPA 中使用答案

【问题标题】：How do I add CSS files to webpack so that they can be used in Angular2 SPA如何将 CSS 文件添加到 webpack 以便它们可以在 Angular2 SPA 中使用
【发布时间】：2017-04-06 07:11:29
【问题描述】：

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

我也在尝试使用 DevExpress 的商业 DevExtreme 小部件。

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

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

【问题讨论】：

你在使用 angular cli 吗？
我基于github.com/asadsahi/AspNetCoreSpa
我有一个 CSS 文件，但由于我不确定将导入语句放在哪里，所以我无法将其用于 webpack。
我发现你应该安装一些包。这是官方文档webpack.github.io/docs/stylesheets.html。就我而言，我使用 Angular-cli，很容易将 css 文件包含到我的项目中。但是，我在添加一些外部js库和jQuery插件时发现了一些困难。

标签： angular asp.net-core webpack single-page-application devextreme

【解决方案1】：

最简单的方法是将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 指令。

【讨论】：