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文件

Answer 2

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

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

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

Answer 3

ng2-bootstrap的最新开发版包括我提供的有关如何使用@ angular / cli的bootstrap 4的说明。
指令的主要部分仍然适用于bootstrap 3而不会有太多麻烦。您感兴趣的主要问题是，如果您使用SASS并定义一个variable.scss文件，那么您需要的任何覆盖都可以放在该文件中。
如果你想这样做，你将不得不使用SASS版本的bootstrap（SASS版本的github存储库也显示了如何覆盖变量的详细信息）。

Answer 4

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

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

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

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

4 个答案: