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

Question

我正在使用来自 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 标签上的背景颜色。我可以更改节点模块文件夹中的 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 文件