Question

所以我找到了一个bootstrap 4登陆页面（https://startbootstrap.com/template-overviews/resume/），我希望将它集成到我的Angular项目https://github.com/mannyliens/my-portfolio-v2/tree/master/my-portfolio-v2中。我移动了所有文件（gulp文件除外，我没有包含任何依赖项）并相应地调整了链接。我正在尝试更新背景颜色，但在检查devtools（https://imgur.com/a/fnckw）时，我将＃007bff的每个实例都更改为新颜色（＃b22222），但无济于事。

.bg-primary {
    background-color: #007bff!important;
}

即使我更改了Angular项目中的所有实例，我也不确定它的来源。对错误的答案或建议是什么？

Answer 1

您可以尝试使用此方法强制角度覆盖样式。

::ng-deep .bg-primary {
  background-color: #007bff!important;
}

Answer 2

引用来自您的项目所基于的bootstrap.min.css（来自.angular-cli.json文件）。您可以通过指定覆盖引导程序的类来覆盖它们。

示例来自您的项目，而不是<nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top" id="sideNav">，您可以将bg-primary替换为其他类，或者添加新的.css类，例如：navbar navbar-expand-lg navbar-dark bg-primary fixed-top newCssClassThatOverrideBGPrimary

Answer 3

我找到了问题的问题。在我的angular-cli.json文件中，我有＆＃34; ../ node_modules / bootstrap / dist / css / bootstrap.min.css＆＃34;在我的样式属性中定义 - 这解释了为什么在更新.bg-primary的所有实例时背景颜色没有改变。从＆＃34; ../ node_modules / bootstrap / dist / css / bootstrap.min.css＆＃34;在我的src文件夹中，这些文件并没有受到原始更改的影响。

要解决我的问题，我必须删除在styling属性下的angular-cli.json文件中定义的所有值，并使用my assets / vendor文件夹中的.css文件路径更新它们。

CSS属性不会覆盖Angular项目

3 个答案: