javascript - color - Estilos duplicados en la cabeza y muchos elementos<style>

style javascript css

Question

Estoy bastante contento con los componentes de material2 angular, pero hay algunos comportamientos extraños que no entiendo y no tienen la documentación adecuada, especialmente para recopilar y personalizar sus componentes.

Mi proyecto se ve como:

.src
--app
--components
--login-component
login-component.html
login-component.scss
login-component.js
--login-component
home-component.html
home-component.scss
home-component.js
--and so on ...
app.component.html
app.component.scss
app.component.ts
app.module.ts
app.routing.ts
--assets
--environments
--scss
styles.scss
_material2-theme.scss
_variables-scss
_utilities.scss
_reset.scss
favicon
index.html
and so on ....

En angular-cli.json he modificado los estilos para mirar scss / style.scss

...
"styles": [
"scss/styles.scss"
]
...

El _material2-theme.scss se ve como:

//////////////////////* THEMES */ Custom Blue Theme*/
@import ''~@angular/material/theming'';
@include mat-core();
$app-primary: mat-palette($mat-light-blue);
$app-accent: mat-palette($mat-light-blue, A200, A100, A400);
$app-theme: mat-light-theme($app-primary, $app-accent);
@include angular-material-theme($app-theme);
/*default palette forground/background*/
$light-foreground-palette: map-get($app-theme, foreground);
$light-background-palette: map-get($app-theme, background);
$primary: map-get($app-theme, primary);
$accent: map-get($app-theme, accent);

y dentro de style.scss estoy importando todo para compilarlo con el compilador scss cli

//////////////////////* CUSTOM */
@import "_material2-theme.scss";
@import "_reset.scss";
@import "_utilities.scss";
//////////////////////* COMPONENTS */
@import "~app/components/login/login.component.scss";

Mi pregunta es: después de compilar el scss, tenemos en la cabecera html muchas etiquetas de estilo, algunas de ellas duplicadas y con el siguiente aspecto :

Todo parece estar compilado en un estilo que se agrega en head (el que tiene el tipo de atributo) y, a continuación, cada componente scss se divide en cada componente css con su estilo separado en head, y eso es muy raro. ¿Estoy haciendo algo mal o es solo la forma en que funciona el material2?

Answer 1

El comportamiento que está viendo está causado por ViewEncapsulation.Emulated definido para componentes de material.

Primero, no necesita agregar estilos para componentes a los estilos globales "scss/styles.scss" :

//////////////////////* COMPONENTS */
@import "~app/components/login/login.component.scss";

Si lo hace, además de duplicar sus estilos, perderá la encapsulación de estilos porque los estilos agregados para components/login/login.component.scss se volverán globales.

Ahora, a la pregunta de por qué hay muchos elementos de style . Cuando usa ViewEncapsulation.Emulated , y es un modo de encapsulación de vista predeterminado, Angular colocará el estilo de cada componente en su propia etiqueta de style y agregará el atributo a los elementos dentro de una plantilla de componente. En el material, todos los componentes utilizan el modo de encapsulación emulado, por lo que para cada componente se agrega la etiqueta de style .

Si agrega @Component({..., encapsulation: ViewEncapsulation.Native }) para sus componentes, verá que se eliminará el style de sus componentes.

Aquí está la lógica que agrega la etiqueta de style :

export class DomSharedStylesHost extends SharedStylesHost implements OnDestroy {
...
private _addStylesToHost(styles: Set<string>, host: Node): void {
styles.forEach((style: string) => {
const styleEl = this._doc.createElement(''style''); <--- creates a style element
styleEl.textContent = style;
this._styleNodes.add(host.appendChild(styleEl));
});
}

Answer 2

En Diseño de materiales para Angular, la hoja de estilo se divide en:

• Estilo - márgenes, rellenos, etcétera que está vinculado desde el componente
• tema - principalmente colores que se construyen usando el tema scss
• tipografía: fuentes y propiedades de fuente que se crean utilizando la tipografía scss

Esto causa selectores similares, pero con diferentes propiedades dentro.

Creo que es el servidor de desarrollo en vivo que viene con cli o webpack angular que carga css dinámicamente lo que causa la duplicación de etiquetas de estilo. Creo que esto no está sucediendo en una compilación de producción.

PD. Extraño de ti para agregar _reset.scss después de cualquier otra cosa.

Answer 3

En desarrollo, el cli o webpack angular compila todos los archivos css / scss de cada componente en una etiqueta de estilo en la página HTML.

es decir, en su caso: login-component.scss, home-component.scss, cada uno se cargará dentro de etiquetas de estilo separadas en la página HTML.

Todo esto se compilará en un solo archivo css y se vinculará en index.html en la configuración de producción.

Así que yo también creo que es la forma en que funciona el angular!

Actualmente veo que solo hay un archivo generado en la creación de producción ng build --prod .

Answer 4

Hay múltiples etiquetas de style en su cabeza, ya que todos sus component están vinculados con algún css diferente externo O bien, ha escrito un css interno en la página HTML relacionada.

Si desea que solo haya una etiqueta de style toda la aplicación, en ese caso debe escribir todo el estilo en un solo archivo.

Answer 5

No creo que se deba a tener estilos separados para cada componente. Este problema es similar a lo que hay en un ngularjs-material también.

Angular-material incluye algún tema por defecto css como una variable constante en JavaScript.

Puede leer más sobre este tema, ngularjs-material