When I put styles code in component.scss
, but it does not affect the referred target, however when I put style code on src/scss/style.scss
it works perfectly. Does anyone know what is the problem?
If it is lack of technical knowledge, please reference me some material to study.
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.
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 {}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With