我想改变我的离子页面的完整背景颜色，在我的情况下，它是登录页面。当我在Chrome开发者工具中检查代码时，看到的是core.scss：149。当我添加一些自定义CSS时，比如：background-color: red我想要的工作。而是我在代码中访问这个CSS的位置。当我从我的组件中添加一些自定义CSS到SCSS文件中时，它不起作用。我如何取得这种成功？

的数据
我只想通过SCSS文件更改我的登录组件HTML页面的背景颜色。
我的CSS看起来像这样：

.div-login{
    min-height: 70%;
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 20%;
    border-radius: 30px;
    min-width: 60%;
    background-color: gray;
}

.ion-page {
    background-color: red !important;
}

.loginFields{  
    margin-left: 5%;
    margin-right: 5%;
    border-radius: 10px;
    margin-bottom: 5%;  
}

字符串
我的HTML看起来像这样：

<div class="div-login">
   <div *ngIf="!registerNewUserVariable">
      <div style="display: flex; justify-content: center; align-items: center;">
         <p style="font-size: 20px;">Login</p>
      </div>
      <div style="display: flex; justify-content: center; align-items: center;">
      </div>
      <div>
         <form (ngSubmit)="login()" [formGroup]="credentials">
         <ion-item class="ion-margin-bottom" class="loginFields">
            <ion-input
               type="email"
               placeholder="Email 🧙"
               formControlName="email"
               ></ion-input>
         </ion-item>
         <ion-item class="ion-margin-bottom" class="loginFields">
            <ion-input
               type="password"
               placeholder="🔒"
               formControlName="password"
               ></ion-input>
         </ion-item>
         </form>
         <p (click)="resetPassword_()" style="font-size: 12px; text-decoration: underline; margin-left: 7%;">Passwort vergessen</p>
      </div>
      <ion-button type="submit" color="warning" class="loginFields" expand="block" [disabled]="!credentials.valid" (click)="login()" style="margin-top: 15%;"> Sign in</ion-button>
      <p style="display: flex; justify-content: center; align-items: center;">📌 connect 📌</p>
      <ion-button color="light" style="display: flex; justify-content: center; align-items: center; margin-left: 10%; margin-right: 10%; margin-top: 10%;" (click)="loginWithGoogle()">
         <ion-icon name="logo-google"></ion-icon>
      </ion-button>
      <!--     <p style="display: flex; justify-content: center; align-items: center; white-space: pre-wrap; text-align: center;"> No Email Account?  <br> <u> Okay Lets Goooo 🎡 </u> </p> -->
      <div style="display: flex; justify-content: center; align-items: center;">
         <p  (click)="registerNewUser()" style="font-size: 12px; white-space: pre-wrap; text-align: center;">No Email Account?  <br> <b> <u>Okay Lets Goooo</u>🎡  </b>  </p>
      </div>
   </div>
   <div *ngIf="registerNewUserVariable">
      <ion-button (click)="registerNewUser()" style="margin-top: 5%; margin-left: 5%;" color="medium">
         <ion-icon name="arrow-back-outline"></ion-icon>
      </ion-button>
      <div style="display: flex; justify-content: center; align-items: center;">
         <p style="font-size: 20px; white-space: pre-wrap; text-align: center;">nice to meet u </p>
      </div>
      <p style="margin-left: 5%;">Email? </p>
      <form (ngSubmit)="register()" [formGroup]="credentialsRegister">
      <ion-item class="ion-margin-bottom" class="loginFields">
         <ion-input
            type="email"
            placeholder="Email 🧙"
            formControlName="email_"
            ></ion-input>
      </ion-item>
      <p style="margin-left: 5%;"> pw</p>
      <ion-item class="ion-margin-bottom" class="loginFields">
         <ion-input
            type="password"
            placeholder="🔒"
            formControlName="password_"
            ></ion-input>
      </ion-item>
      <ion-item class="ion-margin-bottom" class="loginFields">
         <ion-input
            type="password"
            placeholder="🔒 check"
            formControlName="passwordCheck_"
            ></ion-input>
      </ion-item>
      </form>
      <ion-button type="submit" color="warning" class="loginFields" expand="block" (click)="register()" style="margin-top: 15%;"> Register</ion-button>
   </div>
</div>

型