Component specific sass file not picked up

Hi,

If got some weird issue with ionic 4. Every component is being generated with a scss file, However putting a custom class in there and applying that class on the html file it does not even seem to build or something.

Placing the same code in global.scss works fine.

Element specific scss files worked fine in ionic 3.

With best regards,
Robin

  1. The scss or css has to be referenced in its component, like

      @Component({
      selector: 'app-home',
      styleUrls: ['./home.page.scss'],
      templateUrl: './home.page.html'
    })
    
  2. Without specifying any specific ViewEncapsulation, per default, your css/scss should not contains anymore it’s component name

for example styling a div of the component home.page.scss

v3

 app-home {
    div {
      color: red;
    }
 }

v4

 div {
      color: red;
    }