component.scss inside component folder does not work

Question

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.

Please read this article, there are many solution on there (angular.io/guide/component-styles) — Serkan KONAKCI
– Serkan KONAKCI, Commented Jan 12, 2021 at 1:06

halfer · Accepted Answer · 2017-09-26 11:41:32Z

55

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 {}

edited Sep 26, 2017 at 11:41

halfer

20.2k20 gold badges110 silver badges207 bronze badges

answered Sep 14, 2017 at 11:36

alexKhymenko

5,64826 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

JPNotADragon Over a year ago

I had to wade through ~6 useless threads before finding your answer.

xinthose Over a year ago

::ng-deep is being deprecated: link

alexKhymenko Over a year ago

@xinthose /deep/ is being deprecated ::ng-deep is here to stay :-)

xinthose Over a year ago

@alexKhymenko OK. I heard wrong from someone else then. Thank you for clarifying.

krul Over a year ago

@alexKhymenko looks like xinthose is right, see: angular.io/guide/component-styles#deprecated-deep--and-ng-deep

xinthose · Accepted Answer · 2022-07-22 21:15:30Z

12

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.

edited Jul 22, 2022 at 21:15

answered Dec 18, 2019 at 15:19

xinthose

3,9273 gold badges51 silver badges71 bronze badges

1 Comment

krul Over a year ago

It's needed to remove component encapsulation that you have trouble penetrating, see: Doesn't provide any sort of CSS style encapsulation, meaning that all the styles provided via Component#styles or Component#styleUrls are applicable to any HTML element of the application regardless of their host Component.

ForestG · Accepted Answer · 2017-09-14 11:41:12Z

7

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.

answered Sep 14, 2017 at 11:41

ForestG

18.2k16 gold badges64 silver badges94 bronze badges

2 Comments

Natanael Over a year ago

You are right. The angular cli does not created the styleUrls in @Component decorator. Thank you!

Harry_C Over a year ago

Thank you for this! Sometimes the easy is to easy :-)

soni kumari · Accepted Answer · 2020-10-26 08:04:59Z

0

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.
})

answered Oct 26, 2020 at 8:04

soni kumari

4075 silver badges4 bronze badges

Collectives™ on Stack Overflow

component.scss inside component folder does not work

4 Answers 4

5 Comments

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related