Ionic 2 app.scss問題

Question

我一直在爲一個月的離子2應用程序工作。我通常在Android上測試，它工作得很好。我只是跑在IOS上，設計非常錯誤。它看起來並不是正在讀取我用於全局CSS類的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

您的一些風格列入app.scss的樣本似乎是Android的特定。

如：

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

類與-md後綴僅適用於Android設置。您必須爲-ios後綴設置類似的樣式。

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