CSS 属性在 Angular 项目中没有被覆盖答案

【问题标题】：CSS Property not overriding in Angular ProjectCSS 属性在 Angular 项目中没有被覆盖
【发布时间】：2018-04-12 04:27:34
【问题描述】：

所以我找到了一个 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 项目中的所有实例，我也不确定这是从哪里来的。有什么问题的答案或建议吗？

【问题讨论】：

内联工作了吗？
@Nihal 我避免使用内联样式 - 我更喜欢通过 .css 文件继承样式。
您的代码 sn-p 中缺少一个空格。
#007bff !important
点击开发工具右上角的<style></style>链接。它会告诉你它的确切位置。

标签： html css angular bootstrap-4

【解决方案1】：

你可以试试这个来强制 angular 覆盖样式。

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

【讨论】：

【解决方案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

【讨论】：

【解决方案3】：

我发现了我的问题。在我的 angular-cli.json 文件中，我在样式属性中定义了“../node_modules/bootstrap/dist/css/bootstrap.min.css” - 这解释了为什么当我更新所有实例时背景颜色没有改变.bg-primary 的。由于“../node_modules/bootstrap/dist/css/bootstrap.min.css”不在我的 src 文件夹中，因此这些文件不受我原来的更改的影响。

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

【讨论】：