Ionic 3至Ionic 4 SCSS迁移

Question

最近，我试图将我的Ionic 3项目迁移到Ionic 4。大多数迁移都可以成功进行，但是我的样式一直存在问题。

经过一番阅读后，我对样式进行了一些更改，如下所示：

• 将全局样式从app.scss移动到global.scss
• 例如，将主题样式$colors更改为:root { ion-color- ... }
• （某些）组件的命名更改（ion-navbar至ion-toolbar，button至ion-button等）
• 已删除页面特定样式中的页面选择器（因此已删除page-login { ... }中的login.scss）

尽管样式仍然不太正确。我可能仍然缺少一些东西。例如，我在登录页面中使用了特定于页面的样式。

在Ionic 3中，此页面的样式文件如下所示：

page-login {
  .content {
    background: url('../assets/img/background.png') no-repeat;
    background-size: cover;

    #logo {
      padding-top: 5rem;
    }

    form {
      position: absolute;
      bottom: 0;
      width: 100%;

      .logo-row {
        margin-bottom: 40%;
      }

      .form-inputs {

        .label-ios {
          width: 60px;
          max-width: 60px;
        }

        ion-icon, .select-ios, ::-webkit-input-placeholder {
          color: color($colors, lightGray);
          max-width: 100%;
        }

        .item-ios {
          background: transparent;
          padding-left: 0;

          &:first-child {
            border-top: none;
          }

          .input-wrapper {
            padding-left: 50px;

            input.text-input.text-input-ios {
              color: color($colors, lightGray);
            }
          }
        }

        [icon-only] ion-icon {
          line-height: 1;
        }

      }
    }
  }
}

在我的Ionic 4应用程序中，将其更改为以下内容：

ion-content {
  --background: url('../../../assets/img/background.png') no-repeat;
  --background-size: cover;

  #logo {
    padding-top: 5rem;
  }

  ion-form {
    --position: absolute;
    --bottom: 0;
    --width: 100%;

    .logo-row {
      margin-bottom: 40%;
    }

    ion-inputs {

      .ios ion-label {
        --width: 60px;
        --max-width: 60px;
      }

      ion-icon, .select-ios, ::-webkit-input-placeholder {
        --color: var(--ion-color-lightGray); //color($colors, lightGray);
        --max-width: 100%;
      }

      .ios ion-item {
        --background: transparent;
        --padding-left: 0;

        &:first-child {
          --border-top: none;
        }

        .input-wrapper {
          --padding-left: 50px;

          input.text-input.text-input-ios {
            --color: var(--ion-color-lightGray); //color($colors, lightGray);
          }
        }
      }

      [icon-only] ion-icon {
        --line-height: 1;
      }

    }
  }
}

有些东西的样式不正确：

• [我以为我必须用它前面的ion-替换最特定于离子的组件，对于内容来说似乎可行，但针对此的form似乎不可行（ion-form），而form （曾经是骗子）也不起作用。有什么线索可以代替我吗？还是应该忽略form定位并将其保留在ion-content中？
• 还有一些html内联样式，我不知道在Ionic 4中是否仍正确使用所有这些样式？例如，我读过某处应该将padding text-center替换为class="ion-padding ion-text-center"，但是内联col-x和offset-x样式呢？

My Ionic html login页面如下：

<ion-header [ngClass]="'no-shadow'">
  <ion-toolbar transparent>
    <ion-buttons start>
      <button ion-button icon-only menuToggle>
        <ion-icon name="menu"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-row class="logo-row" *ngIf="isKeyboardHidden">
    <ion-col col-8 offset-2 class="ion-padding ion-text-center">
      <img id="logo" src="assets/img/logo-dia-positive.png">
    </ion-col>
  </ion-row>

  <form #f="ngForm" (ngSubmit)="onSubmit()">
    <ion-row>
      <ion-col>
        <p style="height: 16px"></p>
      </ion-col>
    </ion-row>
    <ion-list no-lines class="form-inputs">
      <ion-item>
        <ion-label icon-only>
          <ion-icon name="person"></ion-icon>
        </ion-label>
        <ion-input
          type="text"
          name="username"
          [(ngModel)]="account.username"
          [placeholder]="'USERNAME' | translate"
          required></ion-input>
      </ion-item>
      <ion-item>
        <ion-label icon-only>
          <ion-icon name="unlock"></ion-icon>
        </ion-label>
        <ion-input
          type="password"
          name="password"
          [(ngModel)]="account.password"
          [placeholder]="'PASSWORD' | translate"
          required></ion-input>
      </ion-item>
    </ion-list>
    <ion-row>
      <ion-col col-10 offset-1>
        <ion-button
          block
          [disabled]="!f.valid || isLoading">
          {{'LOGIN' | translate}}
        </ion-button>
      </ion-col>
    </ion-row>
  </form>
</ion-content>

<ion-footer *ngIf="isKeyboardHidden">
  <ion-row>
    <ion-col class="ion-text-center">
      <p class="light-gray">
        {{'DEVELOPED_BY' | translate}}
        <span class="bold">
          <a class="default-text"
             href="https://www.my-company.com/"
             target="_blank">
          My Company
        </a>
        </span>
      </p>
    </ion-col>
  </ion-row>
</ion-footer>

任何想法或指针，我（仍）缺少什么？

Answer 1

在这里您可以找到官方的迁移指南。他们列出了所有已更新和重大更改的控件：https://github.com/ionic-team/ionic/blob/master/angular/BREAKING.md#breaking-changes