component.scss inside component folder does not work

user_4267688 0
Viewed 12382

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.

angular sass
4 Answers

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.

user_40561460

i am not sure it would help you or not but for me the issue was because i was using styles[] in my component because of which it was not able to read .scss file.

@Component({
  selector: 'myse-draft-order',
  styleUrls: ['./something.component.scss'],
  templateUrl: './something.html',
  styles: [], // needs to be removed.
})
user_129587260
Related