0

I have a simple Ionic2/3 example using the Tabs template in Stackblitz. I'm trying the change the size of P & color, yet it's not working (No error message).

home.scss

page-home{
  p {
    font-size: 100px !important;
    color: red;
  }
}

home.html

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
    <p>TEST SHOULD BE 50PX</p>  <!-- there is no change here -->
</ion-content>
Melchia
  • 22,578
  • 22
  • 103
  • 117

2 Answers2

2

You need to import the style in your component. This is what your component definition should look like:

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

Also, your CSS selector is wrong. I don't know what page-home is supposed to do. I recommend assigning a class to the ion-content element.

SCSS:

.page-content {
  p {
    font-size: 100px !important;
    color: red;
  }
}

HTML:

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content class="page-content" padding>
    <p>TEST SHOULD BE 50PX</p>  <!-- there is no change here -->
</ion-content>

Here is a working example.

JSON Derulo
  • 9,780
  • 7
  • 39
  • 56
2

For separate SCSS you have to use selector.

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

SCSS

Selector from @Component and Parent class of SCSS file must be same.

.page-home {
  p {
    font-size: 100px !important;
    color: red;
  }
}

GLOBAL SCSS

You can use SCSS from APP.SCSS file. No selector is required for this.

M Shafique
  • 786
  • 7
  • 18