使用 webpack 用我们的自定义 css 覆盖 bootstrap 的 css

Question

我正在制作一个 Angular2 应用程序，并且我正在使用引导程序进行样式设置。我使用 webpack 作为模块捆绑器。我已经包含了 bootstrap 库和来自 vendor.ts 的全局自定义样式表。 这是我的 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 文件中的引导程序 css 之后链接您的自定义 css（例如）

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

用你自己的风格覆盖引导程序的风格。我如何使用 webpack 做到这一点？谢谢。

Answer 1

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