17

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.

1

4 Answers 4

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 {}
Sign up to request clarification or add additional context in comments.

5 Comments

I had to wade through ~6 useless threads before finding your answer.
::ng-deep is being deprecated: link
@xinthose /deep/ is being deprecated ::ng-deep is here to stay :-)
@alexKhymenko OK. I heard wrong from someone else then. Thank you for clarifying.
@alexKhymenko looks like xinthose is right, see: angular.io/guide/component-styles#deprecated-deep--and-ng-deep
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.

1 Comment

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

2 Comments

You are right. The angular cli does not created the styleUrls in @Component decorator. Thank you!
Thank you for this! Sometimes the easy is to easy :-)
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.
})

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.