In my Angular project, I have scss rules that describe how components should look when in the context of another component. Example:
:host-context(my-table my-row.header){
font-weight: 500;
white-space: nowrap;
height: 40px;
color: #6d6d6d;
background-color: #f3f3f3;
}
This works fine when working on localhost, however when I build it for production & put it live it does not apply that styling. Not sure what the difference would be?
Looking for suggestions on how to fix this so that the styling shows on production as well as development.
Okay after googling & experimenting a bunch I finally figured out how to fix the issue, although I have no idea why or why it works in dev but not in prod.
Essentially, if you use :host-context with multiple selectors, like so:
:host-context(my-table my-row){ ... }
It works in dev but will not work in prod.
Instead you should replace that with:
my-table my-row :host-context{ ... }
If you're only using one selector inside like :host-context(my-table){ ... } it works as expected on both prod & dev.
Credit to this comment I found https://github.com/angular/angular-cli/issues/8577#issuecomment-379177320 for giving me insight into how to move foward.