Solución:
A partir de la versión beta.14 de la CLI (que usa Angular 2.0 final), se puede vincular una hoja de estilo global dentro angular-cli.json bajo la tecla “estilos”. Esta es una referencia a un archivo relativo al src/ directorio, que es style.css por defecto.
Aprovechando este método, podría:
- Copie los estilos globales en
src/styles.css - Utilice importaciones de CSS para importar reglas externas en
styles.css - Agregue más estilos globales a través del
apps[0].stylespropiedad enangular-cli.json
Consulte también Estilos globales en angular-cliwiki.
Ninguna de las respuestas anteriores explica lo que REALMENTE está sucediendo en el sistema CSS de Angular o por qué podría estar viendo problemas en cascada. Podría considerar mover todo su CSS del compilador angular a sus propios enlaces externos.
En un proyecto Angular, cuando agrega rutas de estilos directamente en el archivo de configuración “angular.json” (más nuevo) o “angular-cli.json” (más antiguo), Angular toma todos esos archivos CSS, los compila en un archivo JavaScript, luego los escupe como estilos incrustados en el encabezado de su archivo HTML:
Esta configuración de angular.json:
"styles": [
"src/styles.css",
],
Se convierte en un estilo incrustado en el DOM de su navegador en la memoria:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Project</title>
<style>
.mystyle {color:blue;}/* everything in styles.css gets dumped in here! */
</style>
<body>
...
¡Mal diseño CSS! Solo puede ver esto si va a un navegador y usa F12 y mira las escuchas angulares DOM y CSS reales en la memoria de su navegador. Si usa el estilo de componentes, sucede lo mismo cuando esos componentes se cargan en el DOM mediante módulos angulares, etc. Se volcan en OTRO elemento de estilo incrustado debajo del primero.
No estoy 100% seguro de que los chicos de Angular entendieran lo que estaban haciendo al agregar estilos incrustados como este. Cualquier CSS en sus estilos vinculados podría ocultarse con estos sistemas de estilo incrustados que usa Angular si se insertan DESPUÉS de sus estilos vinculados.
Una de las cosas que no me gustan de Angular es que si colocas etiquetas CSS IMPORT dentro de tu archivo “styles.css” (por ejemplo, para arrancar), el compilador también las toma y las escupe en estas etiquetas de estilo incrustadas. . Tradicionalmente, la importación de una hoja de estilo a otra se utilizaba para controlar el orden en cascada, ya que las hojas importadas se insertaban antes que otros estilos en la página principal. Usamos @import para ocultar estilos que no son compatibles con navegadores muy antiguos y administramos grandes bibliotecas de estilos por función de esta manera. Debido a que Angular ignora todo eso ahora y mezcla todo este CSS, te queda un gigantesco bloque de estilo en línea incrustado en el encabezado de tu archivo “index.html”, y es muy difícil controlar las órdenes en cascada de esta manera.
El sistema de estilo de Angular tampoco admite el diseño de sitios web o temas que utilizan este sistema en línea, ni el almacenamiento en caché global de estilos vinculados entre páginas que ahorrarían ancho de banda. Y no importa DÓNDE coloque sus hojas de estilo en la estructura de su carpeta, como mencionan las personas anteriores. Si se hace referencia a ellos en angular.json, todos se compilan en estos blobs de estilo incrustados en el encabezado de su página en un orden que no puede controlar.
Por eso te recomiendo QUITAR TODAS LAS REFERENCIAS DE ESTILO DE “ANGULAR.JSON”! Luego, agréguelos a su “index.html” manualmente como enlaces como este:
<link href="https://foroayuda.es/styles/styles.css" rel="stylesheet" />
Tendrá que cambiar su archivo de configuración angular.json por eliminar la lista de rutas de la matriz de estilos luego pegándolo de nuevo en su lista de matriz de activos para que Angular sepa dónde migrar sus carpetas y archivos CSS en la carpeta dist.
Esto le devuelve el control completo del estilo de sus sitios web, las correcciones entre navegadores, las máscaras, etc. Ahora también recupera el control total de su orden en cascada, lo cual es fundamental si desea tener un control total sobre eso.
La vinculación de estilos externos también tiene enormes ventajas de almacenamiento en caché sobre el sistema CSS roto de Google Angular, ya que el navegador almacena en caché de forma natural todo esto en la página se actualiza o se vuelve a visitar. Hemos estado usando CSS de esta manera desde la década de 1990, así que estoy desconcertado por qué Google volvió a un antiguo sistema de estilo en línea. Los estilos vinculados son simplemente superiores para administrar y almacenar en caché CSS. También agregamos cadenas de consulta de control de versiones al final de los archivos CSS vinculados (/mystyles.css?v=1.2) para que pueda forzar actualizaciones, etc. Nuevamente para hacer esto, ELIMINE todas las referencias a CSS en el archivo angular.json y agregue manualmente ellos como enlaces en el encabezado de su archivo index.html.
Creo que puede usar de manera segura el sistema de estilo de componentes siempre que comprenda que cuando carga de manera perezosa o precarga módulos angulares, esos elementos de estilo incrustados se introducen en el DOM y podrían caer en cascada sobre sus estilos entintados. Pero creo que ese es el propósito principal del sistema de estilo modular de Angular. Pero para ser honesto, es innecesario si usa hojas externas de todos modos y sigue las reglas básicas en cascada.
También hay una solución para agregar CSS externo, que es, coloque todo su CSS en la carpeta assets / css de esta manera:
assets/css/style1.css
assets/css/style2.css
assets/css/style3.css
Después de agregar todo el CSS externo, debe importar su referencia en style.css global (es decir, src / style.css) de esta manera:
@import 'assets/css/style1.css';
@import 'assets/css/style2.css';
@import 'assets/css/style3.css';
Además, no olvide incluir CSS global en angular-cli.json de esta manera:
"styles": [
"styles.css",
],