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 等）
• 移除了页面特定样式中的页面选择器（因此移除了 login.scss 中的 page-login { ... }）

虽然造型还是不太对。我可能仍然缺少一些东西。 例如，我正在为我的登录页面使用我的页面特定样式。

在 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- 替换大多数 Ion 特定组件，因为内容这似乎有效，但针对此的 form 似乎不起作用 (ion-form)，而 @987654338 @（过去是这样）也不起作用。有什么我应该替换它的线索吗？或者我应该省略form 定位，并将其保留在ion-content 中？
• 还有一些 html 内联样式正在进行，我不知道所有这些样式在 Ionic 4 中是否仍然正确使用？例如，我在某处读到我应该将 padding text-center 替换为 class="ion-padding ion-text-center" 但是内联 col-x 和 offset-x 样式呢？

我的 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