En mi proyecto Angular, tengo reglas scss que describen cómo deben verse los componentes cuando están en el contexto de otro componente. Ejemplo:
:host-context(my-table my-row.header){ font-weight: 500; white-space: nowrap; height: 40px; color: #6d6d6d; background-color: #f3f3f3; }Esto funciona bien cuando se trabaja en localhost, sin embargo, cuando lo construyo para producción y lo pongo en vivo, no aplica ese estilo. ¿No estás seguro de cuál sería la diferencia?
Buscando sugerencias sobre cómo solucionar esto para que el estilo se muestre tanto en producción como en desarrollo.
De acuerdo, después de buscar en Google y experimentar un montón, finalmente descubrí cómo solucionar el problema, aunque no tengo idea de por qué o por qué funciona en desarrollo pero no en producción.
Esencialmente, si usa :host-context con múltiples selectores, así:
:host-context(my-table my-row){ ... }
Funciona en desarrollo pero no funcionará en producción.
En su lugar, debe reemplazar eso con:
my-table my-row :host-context{ ... }
Si solo está usando un selector dentro como :host-context(my-table){ ... } , funciona como se esperaba tanto en prod como en dev.
Crédito a este comentario que encontré https://github.com/angular/angular-cli/issues/8577#issuecomment-379177320 por darme una idea de cómo avanzar.