0
262
VistasCómo agregar SCSS a un componente de una biblioteca angular
Creé una biblioteca en angular 6. El problema es que no se aplica el estilo. Aquí está mi código:
micomponentepersonalizado.html
<div class="cutom-div"> Hello </div>mycustom.component.ts
import { Component, OnInit } from "@angular/core"; @Component({ selector: "lib-mycustom", templateUrl: "./mycustom.component.html", styleUrls: ["./mycustom.component.scss"], }) export class MycustomComponent implements OnInit { constructor() {} ngOnInit() {} }mycustom.component.scss
.custom-div { background: red; height: 20px; }Se suponía que esto iba a ser sencillo. Pero no se aplica estilo. Inspeccioné el elemento también:
¿Qué más me estoy perdiendo aquí? Por favor, señale mi error.
Estoy construyendo la biblioteca normalmente:
ng build my-library y luego cd dist\my-library>npm pack
1 Respuestas
Responde la pregunta0
https://angular.io/api/core/ViewEncapsulation#None
None significa que Angular no encapsula la vista. Angular agrega el CSS a los estilos globales. Las reglas de alcance, los aislamientos y las protecciones discutidas anteriormente no se aplican. Este modo es esencialmente el mismo que pegar los estilos del componente en el HTML.
@Component({ selector: "lib-mycustom", templateUrl: "./mycustom.component.html", styleUrls: ["./mycustom.component.scss"], encapsulation: ViewEncapsulation.None, // <- This need use for global style })