Css/scss changes display in ionic serve but do not persist in ionic build for iOS

Ionic Framework ionic-v3
1

Currently running Ionic v 3.20.0. I made some simple background color changes for the navbar of the project which can be seen in the snapshot below.
In src/pages/home/home.html, I have the following markup:

<ion-header>
  <ion-navbar class="toolbar toolbar-background-md" style="height: 64px;">
...
</ion-navbar>

In app.scss, I define the toolbar styling properties:

ion-navbar > .toolbar {
  // min-height: 50px !important;
  height: 64px !important;
  text-align: left !important;
  background: #336279 !important;
}

.toolbar-background-md {
  background: #336279;
}

When I run ionic serve, the changes appear. However, when I run ionic cordova build ios --prod, the navbar > .toolbar background color stays #f8f8f8, which was the previously set before I took on this project. I looked in the www/build/main.css and saw that the changes are not being persisted in there as well.

I have no idea what is going on. Any ideas? Gracias.

45%20PM
Screen Shot 2018-06-26 at 9.20.45 PM.jpg1371×884 118 KB

2

Try:

.ios, .md, .wp {

    $colors: (
      primary: $orange,
    );

    ion-navbar {
      background-color: map-get($colors, primary);
    }

    .toolbar-background {
      background-color: map-get($colors, primary);
    }
    .toolbar-title {
      color: $white;
    }

    ...

}

See: https://robferguson.org/blog/2017/11/12/theming-your-ionic-3-app/

3

That worked! Thanks a bunch, Rob.