Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

component.scss inside component folder does not work

Tags:

sass

angular

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.

like image 332
Natanael Avatar asked Sep 14 '17 11:09

Natanael


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

like image 84
xinthose Avatar answered Nov 18 '22 11:11

xinthose


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.

like image 7
ForestG Avatar answered Nov 18 '22 12:11

ForestG


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 {}
like image 48
alexKhymenko Avatar answered Nov 18 '22 13:11

alexKhymenko