使用webpack

Question

我正在创建一个Angular2应用程序，我正在使用bootstrap进行样式化。我使用webpack作为模块捆绑器。我在vendor.ts中包含了bootstrap库和我的全局自定义样式表。 这是我的vendor.ts：

// Angular
import '@angular/platform-browser';
import '@angular/platform-browser-dynamic';
import '@angular/core';
import '@angular/common';
import '@angular/http';
import '@angular/router';
// RxJS
import 'rxjs';
// Other vendors for example jQuery, Lodash or Bootstrap

import 'jquery';
import 'bootstrap-loader';
import 'font-awesome-sass-loader';
// You can import js, ts, css, sass, ...

import '../public/css/styles.css';

通常你必须在HTML文件中将bootssrap的css后的自定义css链接起来（例如）

<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="custom.css">

用自己的风格覆盖bootstrap的样式。我如何使用webpack做到这一点？感谢。

Answer 1

这与angular 2无关。您可以按照覆盖index.html的顺序包含css文件，并像使用任何其他项目一样使用它们。 但是，如果您具有特定于组件的样式，则可以在具有styles / styleUrls元数据属性的组件中使用它们，以便仅封装特定于该组件的css。