Así que encontré una página de inicio de bootstrap 4 (https://startbootstrap.com/template-overviews/resume/) que quería integrarlo en mi proyecto Angular https://github.com/mannyliens/my-portfolio-v2/tree/master/my-portfolio-v2. Moví todos los archivos (excepto el archivo gulp y no incluí ninguna de las dependencias) y ajusté los enlaces en consecuencia. Estoy tratando de actualizar el color de fondo y, mientras reviso las herramientas de desarrollo (https://imgur.com/a/ fnckw) Cambié cada instancia de # 007bff a un nuevo color (# b22222) pero fue en vano.

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

No estoy exactamente seguro de dónde viene esto a pesar de que cambié todas las instancias en mi Proyecto Angular. ¿Alguna respuesta o sugerencia a lo que está mal?

1
GeekByDesign 21 ene. 2018 a las 07:28

3 respuestas

La mejor respuesta

Resolví el problema a mi problema. En mi archivo angular-cli.json, tenía "../node_modules/bootstrap/dist/css/bootstrap.min.css" definido en mi atributo de estilo, lo que explica por qué el color de fondo no cambió cuando actualicé todas las instancias de .bg-primary. Como "../node_modules/bootstrap/dist/css/bootstrap.min.css" no está en mi carpeta src, estos archivos no se vieron afectados por mi cambio original.

Para resolver mi problema, tuve que eliminar todos los valores definidos en mi archivo angular-cli.json bajo el atributo de estilo y actualizarlos con las rutas de archivo .css de mi carpeta de activos / proveedores.

0
GeekByDesign 22 ene. 2018 a las 03:02

La referencia proviene de bootstrap.min.css en la que se basa su proyecto (de su archivo .angular-cli.json). Puede anularlos especificando la clase que anula el material de arranque.

Ejemplo de su proyecto en lugar de <nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top" id="sideNav"> puede reemplazar bg-primary con una clase diferente o agregar la nueva clase .css después como: navbar navbar-expand-lg navbar-dark bg-primary fixed-top newCssClassThatOverrideBGPrimary

0
Asura 21 ene. 2018 a las 04:59

Puede intentar esto para forzar angular para anular los estilos.

::ng-deep .bg-primary {
  background-color: #007bff!important;
}
1
Mike Tung 21 ene. 2018 a las 04:51