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

Question

我正在制作一个 Angular2 应用程序，并使用 bootstrap 进行样式设置。我使用 webpack 作为模块 bundler 。我已经包含了 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 文件中的 Bootstrap css 之后链接自定义 css(例如。)

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

用您自己的样式覆盖 Bootstrap 的样式。我该如何使用 webpack 来做到这一点？谢谢。

Answer 1

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