1

I have an angular site that has a component that specifies a .scss file:

@Component({
  selector: 'app-config',
  templateUrl: './config.component.html',
  styleUrls: ['./config.component.scss']
})
export class ConfigComponent implements OnInit {

The contents of config.component.scss are as follows:

.api-selected {
    background-color: yellowgreen !important;
  }

Yet I don't see "api-selected" in Chrome inspector. My html has an element that has the class "api-selected", and if I insert "api-selected" manually in inspector, the background effect shows up. In other components, the .scss contents are active. I've tried clearing the browser cache. If I save config.component.scss, the project rebuilds, so that part is working.

Any suggestions appreciated...

Lee Merrill
  • 11
  • 2
  • Does the HTML have an element called `.api-selected` or is it in a child component? If this is the case, you have to use `::ng-deep` to pierce through the child component because Angular's CSS styles apply to that component and to that component only. https://stackoverflow.com/questions/36527605/how-to-style-child-components-from-parent-components-css-file – AliF50 Sep 17 '20 at 22:04
  • Thanks! I used "encapsulation: ViewEncapsulation.None" to fix this, as shown in your link. – Lee Merrill Sep 21 '20 at 15:57

0 Answers0