Ionic 2 app.scss issue

Question

私は1ヶ月間イオン2アプリを開発しています。私は通常、Androidでテストしていますが、完璧に動作していました。私はIOS上で走ったばかりで、設計は非常に間違っています。グローバルなCSSクラスに使用するapp.scssファイルを読んでいないようです。何が問題なの？

これはあなたのスタイルのいくつかはapp.scssに含まapp.scssファイルのサンプル

/***** Validation *****/ 
.error { 
    background-color: $red; 
    margin-top: 15px; 
    margin-bottom: 15px; 
    padding: 10px 10px 10px 10px; 
    color: white; 
} 

.error ion-icon { 
    padding-right: 5px; 
} 

/***** Loading *****/ 
ion-spinner { 
    position: absolute; 
    left: 50%; 
    top: 50%; 

    .z-index { 
     z-index: 2; 
    } 
} 

/***** Menu *****/ 
.header-md::after, .tabs-md[tabsPlacement="top"] > .tabbar::after, .footer-md::before, .tabs-md[tabsPlacement="bottom"] > .tabbar::before { 
    background-image: none; 
} 

ion-header { 
    .navbar { 
     padding: 0; 
     box-shadow: 0 4px 2px -2px #aeaeae; 
    } 

    .navbarSection { 
     padding: 8px 8px 0px 8px; 
    } 

    .menuSection { 
     text-align: left; 

     button:hover, 
     button { 
      color: white !important; 

      div { 
       margin-left: 10px; 
      } 
     } 
    } 

    .titleSection { 
     text-align: center; 

     ion-title h5 { 
      font-size: 14px; 
      color: white; 
     } 
    } 

    .buttonsSection { 
     text-align: right; 

     button, button:hover { 
      background-color: #ffffff !important; 
      color: $black; 
      font-weight: bolder; 
      text-transform: none; 
      font-size: 12px; 
     } 

     ion-icon { 
      padding-left: 10px; 
      padding-right: 10px; 
      font-size: 16px; 
     } 
    } 

    .categoriesSection { 
     background-color: white; 
     height: 42px; 


     .filterSection { 
      div { 
       display: inline-block; 
      } 

      .filter-icon { 
       color: $blue; 
       margin-left: 15px; 
       font-weight: bolder; 
      } 

      .filter-searchbar { 
       position: relative; 
       margin-left: 10px; 
      } 
     } 
    } 

Answer 1

では、Android特有のように見えます。

例：-md接尾辞

.header-md::after, .tabs-md[tabsPlacement="top"] > .tabbar::after, .footer-md::before, .tabs-md[tabsPlacement="bottom"] > .tabbar::before { 

クラスは唯一のアンドロイドのために設定されています。接尾辞-iosの同様のスタイルを設定する必要があります。

.header-ios::after, .tabs-ios[tabsPlacement="top"] > .tabbar::after, .footer-ios::before, .tabs-ios[tabsPlacement="bottom"] > .tabbar::before {