如何使用 ng2-bootstrap 覆盖 angular2 中的推特 bootstrap 样式

Question

我正在使用来自 valor-software 的 ng2-bootstrap。当我使用 ng serve 启动网站时，提供的页面在 header:

中具有以下样式标签

<style type="text/css">/* You can add global styles to this file, and also import other style files */
</style>

<style type="text/css">/*!
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 *//*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}

显然是从 node_modules/bootstrap/dist/css/bootstrap.css 文件中提取第二个内联样式。我想覆盖 body 标签上的 background-color。我可以更改 node-modules 文件夹中的 bootstrap.css 文件，但感觉这不是正确的解决方案。

更改 style.css 文件没有任何作用。即使更改 index.html 文件似乎也无济于事。样式似乎已被覆盖。

如有任何帮助，我们将不胜感激。

谢谢

Answer 1

经过一番挖掘，我找到了解决方案。

在 angular-cli.json 文件中如下：

"apps": [
{
  "root": "src",
  "outDir": "dist",
  "assets": [
    "assets",
    "favicon.ico"
  ],
  "index": "index.html",
  "main": "main.ts",
  "test": "test.ts",
  "tsconfig": "tsconfig.json",
  "prefix": "app",
  "mobile": false,
  "styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
  "scripts": [],
  "environments": {
    "source": "environments/environment.ts",
    "dev": "environments/environment.ts",
    "prod": "environments/environment.prod.ts"
  }
}

],

我只是需要切换样式的顺序

"styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "styles.css"
  ],

并将任何覆盖添加到 src/styles.css 文件

Answer 2

也许他们在 12 月 post 之后的更新中更改了一些内容。但是我不必对我的 angular-cli.json 文件进行任何更改，但要注意列出的唯一样式是默认的 styles.css 位于 src 文件夹中。但最终对我有用的只是为我的自定义 css 文件添加一些 @import 语句到 bootstrap.css文件并确保在我的 index.html 中引用了样式表。

我的设置是 @angular 2.4.7, 节点-sass 4.5，节点 6.9.5， bootstrap4、 ngBootstrap 1.0.0-alpha

Answer 3

ng2-bootstrap 的最新开发版本包括我提供的关于如何使用 bootstrap 4 和 @angular/cli 的说明。
说明的主要部分应该还是适用于bootstrap3的，不用太麻烦。您的主要兴趣点是，如果您使用 SASS 并定义一个 variable.scss 文件，那么您需要的任何覆盖都可以放在该文件中。
如果您确实想这样做，则必须使用 bootstrap 的 SASS 版本（SASS 版本的 github 存储库还显示了如何覆盖变量的详细信息).

Answer 4

如果您正在使用 sass，我建议您应该这样做，那么您可以在将 bootstrap 导入 [= 之后放置覆盖17=] 文件。例如

// version 4
@import 'variables';
@import '~bootstrap/scss/bootstrap';

// START bootstrap override
.card {
  margin-bottom: 0.5rem;
}
.card-body {
  padding: 1rem;
}

Answer 5

检查 src/styles.sass 文件的底部，以便 bootstrap 像这样导入：

/* Importing Bootstrap SCSS file. */
@import '~bootstrap/scss/bootstrap'

将此行移至文件开头解决了我的问题。

如何使用 ng2-bootstrap 覆盖 angular2 中的推特 bootstrap 样式

How to override twitter bootstrap styles in angular2 with ng2-bootstrap

css

ng2-bootstrap

angular