Ionic 3 to Ionic 4 SCSS migration

Question

Lately I am trying to migrate my Ionic 3 project to Ionic 4. Most of the migration is going successful but I keep having problems with my styling.

After some reading I changed a few things to my styling, listed below:

• Moved global styling from app.scss to global.scss
• Changed theme styling $colors for example to :root { ion-color- ... }
• Changed naming of (some) components (ion-navbar to ion-toolbar, button to ion-button, etc.)
• Removed page selectors in page-specific styling (so removed page-login { ... } in login.scss)

Though the styling is still not quite right. I am probably still missing some things. As example I am using my page-specific style for my login page.

In Ionic 3 the style file looked as follows for this page:

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

      }
    }
  }
}

In my Ionic 4 app I changed it to the following:

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

    }
  }
}

There are a few things which are not styled correctly:

• I thought I had to replace the most Ion specific components with ion- in front of it, for content this seems to work but the form targeting this does not seem to work (ion-form), while form (liek it used to be) also doesn't work. Any clues with what I should replace this? Or should I omit the form targeting and just keep it in ion-content?
• There is also some html inline styling going on, I don't know if all these styles are still correctly used in Ionic 4? For example, I have read somewhere that I should replace padding text-center with class="ion-padding ion-text-center" but what about the inline col-x and offset-x styles?

My Ionic html login page looks as following:

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

Any ideas or pointers what I am (still) missing?

Answer 1

Here you can find official migration guide. They have listed all controls which they updated and Breaking changes: https://github.com/ionic-team/ionic-framework/blob/main/BREAKING_ARCHIVE/v4.md