component.scss inside component folder does not work

If you try to style inside child components it will not work. You should use ng-deep in scss. More information about styling.

::ng-deep .className {}

For me, I needed to set ViewEncapsulation.None for my styleURLs to take effect:

import { Component, OnInit, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-testing',
  templateUrl: './testing.component.html',
  styleUrls: ['./testing.component.scss'],
  encapsulation: ViewEncapsulation.None,
})
export class TestingComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

I am not sure why this is necessary. It is needed in Angular 8 at least, but not in Angular 9 thankfully.


In the component, watch out what is given as the StyleUrl:

@Component({
  selector: 'app-something',
  templateUrl: './something.component.html',
  styleUrls: ['./something.component.scss']
})

Maybe your syntax is bad, or you are referring to a simple something.component.**css** instead of .scss file.

Tags:

Sass

Angular