Why cannot call scss from html in ionic4?

Question

I’m migrating source code from ionic3 to ionic4. If I wrote the style directly in the HTML it can be applied, but I can't call scss using class in HTML. Why I can't call scss from HTML? It works in ionic3.

login.page.ts

..
@Component({
  selector: 'page-login',
  templateUrl: 'login.page.html',
  styleUrls: ['login.page.scss'],
  providers: [CustomNativeStorage]
})
..

login.page.html

<ion-content>
..
  <div class="welcome_text">
    <h4>WELCOME_TEXT</h4>
  </div>
..
</ion-content>

login.page.scss

page-login {
  .welcome_text{
    margin-top: 50px;
    color: white;
    text-align: center;
  }
..
}

Answer 1

Remove the Selector name in scss file login.page.scss

your code

page-login {
  .welcome_text{
    margin-top: 50px;
    color: white;
    text-align: center;
  }
..
}

change to this

.welcome_text{
    margin-top: 50px;
    color: white;
    text-align: center;
  }