Css 如何使用ng2引导覆盖angular2中的twitter引导样式

我正在使用valor软件的ng2引导。当我使用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}

/*您可以将全局样式添加到此文件，也可以导入其他样式文件*/
/*!
*引导程序v3.3.7(http://getbootstrap.com)
*版权所有2011-2016年推特公司。
*麻省理工学院授权(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文本大小调整：100%；-ms文本大小调整：100%}正文{margin:0}

它显然是从node_modules/bootstrap/dist/css/bootstrap.css文件中引入第二个内联样式。我想覆盖body标记上的背景色。我可以更改node modules文件夹中的bootstrap.css文件，但这不是正确的解决方案

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

任何帮助都将不胜感激

---

谢谢

经过一番挖掘，我找到了解决办法

在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文件中添加任何覆盖

也许他们在12月的这篇文章之后的更新中改变了一些东西。但是我不必对angular-cli.json文件做任何更改，但要注意，这里列出的唯一样式是根src文件夹中的默认styles.css。但最终对我有效的方法是将一些自定义css文件的@import语句添加到bootstrap.css文件中，并确保在我的index.html中引用了样式表

我的设置是 @角度2.4.7， 节点sass 4.5， 节点6.9.5， 引导程序4，

---

ngBootstrap 1.0.0-alpha

ng2引导程序的最新开发版本包括我提供的有关如何在@angular/cli中使用引导程序4的说明。
说明的主要部分应该仍然适用于bootstrap 3，不会有太多麻烦。您最感兴趣的一点是，如果您使用SASS并定义variable.scss文件，那么您需要的任何重写都可以放在该文件中。

---

如果您确实想这样做，您必须使用SASS版本的引导（用于SASS版本的github存储库还显示了如何覆盖变量的详细信息）。

如果您使用的是SASS，我建议您应该这样做，那么您可以在将引导导入style.scss文件后放置覆盖。比如说

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

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

---

检查

src/styles.sass文件底部的引导导入，如下所示：

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

将这一行移到文件开头解决了我的问题。
太棒了！您必须重新启动服务器，因为angular cli不会在angular.cli.json中查找更改，因此您必须手动编译和运行。它仍然会覆盖我的本地服务器