如何使用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标签上的背景颜色.我可以更改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文件中