为什么不能在 ionic4 中从 html 调用 scss？

Question

我正在将源代码从 ionic3 迁移到 ionic4。如果我直接在HTML中写样式是可以应用的，但是我不能在HTML中使用class调用scss。为什么我不能从 HTML 调用 scss？它适用于 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

我认为在 templateUrl 和 styleUrls 之前你需要一个斜线，比如：

'./login.page.html'

而且你不需要在.scss文件上引用一次选择器，直接连接到页面。

Answer 2

删除 scss 文件中的选择器名称 login.page.scss

你的代码

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

改成这个

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

为什么不能在 ionic4 中从 html 调用 scss？

Why cannot call scss from html in ionic4?

ionic-framework

angular

ionic4