如何使用 ng2-bootstrap 覆盖 angular2 中的 twitter bootstrap 样式答案

【问题标题】：How to override twitter bootstrap styles in angular2 with ng2-bootstrap如何使用 ng2-bootstrap 覆盖 angular2 中的 twitter bootstrap 样式
【发布时间】：2017-04-27 08:50:01
【问题描述】：

我正在使用来自 valor-software 的 ng2-bootstrap。当我使用 ng serve 启动网站时，提供的页面在标题中具有以下样式标签：

<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 标签上的背景颜色。我可以更改 node-modules 文件夹中的 bootstrap.css 文件，但这不是正确的解决方案。

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

任何帮助将不胜感激。

谢谢

【问题讨论】：

stackoverflow.com/a/69575143/7186739

标签： css angular ng2-bootstrap

【解决方案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 文件

【讨论】：

太棒了！您必须重新启动服务器，因为 angular-cli 不会查找 angular.cli.json 中的更改，因此您必须手动编译和运行。
它仍然在我的本地服务器中覆盖

【解决方案2】：

如果您使用的是 sass，我建议您应该这样做，那么您可以在将引导程序导入 styles.scss 文件后放置覆盖。例如

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

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

【讨论】：

【解决方案3】：

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

我的设置是 @角2.4.7，节点萨斯 4.5，节点 6.9.5，引导程序 4， ngBootstrap 1.0.0-alpha

【讨论】：

【解决方案4】：

ng2-bootstrap 的最新开发版本包括我提供的关于如何将 bootstrap 4 与 @angular/cli 一起使用的说明。
说明的主要部分应该仍然适用于 bootstrap 3，没有太多麻烦。您的主要兴趣点是，如果您使用 SASS 并定义一个 variable.scss 文件，那么您需要的任何覆盖都可以放在该文件中。
如果您确实想采用这种方式，则必须使用 SASS 版本的引导程序（SASS 版本的 github 存储库还显示了如何覆盖变量的详细信息）。

【讨论】：

【解决方案5】：

检查 src/styles.sass 文件的底部以进行引导导入，如下所示：

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

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

【讨论】：