Scss file is not working

Ionic Framework Ionic Angular
1

I’m migrating source code from ionic3 to ionic4.
After source code migration, my ionic4 home.page.scss is not working(only html is displayed without scss).
How do I change below code?

home.page.ts - @component

@Component({
	selector: 'page-home',
	templateUrl: 'home.page.html',
	styleUrls: ['home.page.scss'],
providers: [CustomNativeStorage]
})

home.page.scss

$iphone4: "(device-width: 320px) and (device-height: 480px)";
$iphone5: "(device-width: 320px) and (device-height: 568px)";
$iphone6_7: "(device-width: 375px) and (device-height: 667px)";

.ios, 
.md {
  page-home {
    .swiper-slide.swiper-slide-active{
      width: 100% !important;
     }

    ion-slide {
			background-size:cover;
			background-position: top center;
		}
			
    .home-content-card{
      background-color: rgba(255,255,255,0.85);
      position: absolute;
      width: 100%;
      bottom: 0px;
    }

    .text-container{        
			padding: 5%;
      .home-title{
        font-size: 1.6rem;
        font-weight: bold;
				margin-bottom: 10px;
			}
      .home-text{
        font-size: 1.5rem;
        margin-bottom: 30px;
      }
    }

    .button-container{
      width: 100%;
      text-align: center;
      margin-bottom: 15px;

      .button_continue{
        min-width: 50%;
        @extend .remove-text-transform,
        .remove-button-curves !optional;
      }
    }
  }
}
	
.swiper-pagination-fraction, .swiper-pagination-custom,
 .swiper-container-horizontal > .swiper-pagination-bullets{
  bottom: 10%;
}
.swiper-pagination-bullet-active{
  background: #FF9800;
}
.slide-zoom{
  height: 100% !important;
}


@media #{$iphone4}{
	.swiper-pagination-fraction, .swiper-pagination-custom,
	 .swiper-container-horizontal > .swiper-pagination-bullets{
  bottom: 14.5% !important;
}
}
@media #{$iphone5}{
	.swiper-pagination-fraction, .swiper-pagination-custom, 
	.swiper-container-horizontal > .swiper-pagination-bullets{
  bottom: 11.5% !important;
}
}
@media #{$iphone6_7}{
	.swiper-pagination-fraction, .swiper-pagination-custom, 
	.swiper-container-horizontal > .swiper-pagination-bullets{
  bottom: 10% !important;
}
}
2

Create one of the default apps using Ionic 4 (or 5?) and see how it is implemented.

3

Thank you for your reply.
Of course, I have done that.
But, The default app doesn’t have enough samples for SCSS and could not solve it.

4

So, are any of your scss rules working, or none of them?

5

Buttons and other items are not displayed on the first page, So I cannot move to another page.

6

Probably OT, but I’m 99.9% sure you do not want this here. It is likely wasteful at best and at worst will lead to baffling bugs, because the instance of CustomNativeStorage that HomePage gets is different from the rest of the app.

7

All my scss are not working.

8

Remove the Selector name in scss file login.page.scss

old

page-login {
  .welcome_text{
    margin-top: 50px;
    color: white;
    text-align: center;
  }
..
}

new

.welcome_text{
    margin-top: 50px;
    color: white;
    text-align: center;
  }
1 Like