Ionic framework 离子3到离子4 SCSS迁移

最近我尝试将我的

Ionic 3

项目迁移到

Ionic 4

。大部分迁移都是成功的，但我的样式一直有问题

读了一些书后，我对我的造型做了一些修改，如下所示：

• 将全局样式从

  app.scss

  移动到

  global.scss

• 将主题样式

  $colors

  更改为

  ：root{ion color-…}

• 更改（某些）组件的命名（

  ion导航栏

  为

  ion工具栏

  ，

  按钮

  为

  离子按钮

  ，等等）
• 删除了页面特定样式中的页面选择器（因此在

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

有一些东西的样式不正确：

• 我想我必须用它前面的

  Ion-

  替换大部分离子特定的组件，对于内容来说，这似乎是可行的，但是针对这一点的

  表单似乎不起作用（
  Ion form
  ），而
  表单
  （liek它曾经是）也不起作用。有什么线索可以替换这个吗？或者我应该省略
  表单
  目标，并将其保留在
  离子内容中
  
  还有一些html内联样式正在进行中，我不知道是否所有这些样式在Ionic 4中仍然正确使用？例如，我在某个地方读到，我应该用
  class=“ion padding ion text center”
  替换
  padding text center
  ，但是内联
  col-x
  和
  offset-x
  样式呢
  

我的爱奥尼亚html

login

页面如下所示：

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

{{'LOGIN'| translate}

{{u由{124; translate}}

---

我（仍然）缺少什么想法或建议吗？

在这里你可以找到官方的迁移指南。他们列出了所有更新的控件，并进行了更改：