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

【问题标题】：Why cannot call scss from html in ionic4?为什么不能在ionic4中从html调用scss？
【发布时间】：2020-02-06 20:33:57
【问题描述】：

我正在将源代码从 ionic3 迁移到 ionic4。如果我直接在 HTML 中编写样式，它可以应用，但我不能使用 HTML 中的类调用 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;
  }
..
}

【问题讨论】：

标签： angular ionic-framework ionic4

【解决方案1】：

删除 scss 文件中的 Selector 名称 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;
  }

【讨论】：

【解决方案2】：

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

'./login.page.html'

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

【讨论】：

斜线有无都一样。但是删除选择器起作用了！谢谢。