Page.scss not applyng to page html

Ionic Framework ionic-v3
1

I’m trying to make a table with flexbox on my ionic page using SASS, for some reason the code I’ve written on the .scss file is not applying to the page.html. Any idea?

page html:

      <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
      <script src="jquery-3.2.1.min.js"></script>

Row oriented table

    <div class="Rtable-cell"><h3>Eddard Stark</h3></div>
    <div class="Rtable-cell">Has a sword named Ice</div>
    <div class="Rtable-cell">No direwolf</div>
    <div class="Rtable-cell"><strong>Lord of Winterfell</strong></div>

    <div class="Rtable-cell"><h3>Jon Snow</h3></div>
    <div class="Rtable-cell">Has a sword named Longclaw</div>
    <div class="Rtable-cell">Direwolf: Ghost</div>
    <div class="Rtable-cell"><strong>Knows nothing</strong></div>

    <div class="Rtable-cell"><h3>Arya Stark</h3></div>
    <div class="Rtable-cell">Has a sword named Needle</div>
    <div class="Rtable-cell">Direwolf: Nymeria</div>
    <div class="Rtable-cell"><strong>No one</strong></div>

  </div>
</body

PAGE.SCSS:

         page-ficha-atual {
        $bw: 3px;  // border width

        .Rtable {
        display: flex;
        flex-wrap: wrap;
        margin: 0 0 3em 0;
        padding: 0;
        }
        .Rtable-cell {
        box-sizing: border-box;
        flex-grow: 1;
        width: 100%;  // Default to full width
        padding: 0.8em 1.2em;
        overflow: hidden; // Or flex might break
        list-style: none;
        border: solid $bw white;
        background: fade(slategrey,20%);
        > h1, > h2, > h3, > h4, > h5, > h6 { margin: 0; }
        }


        .Rtable--2cols > .Rtable-cell  { width: 50%; }
        .Rtable--3cols > .Rtable-cell  { width: 33.33%; }
        .Rtable--4cols > .Rtable-cell  { width: 25%; }
        .Rtable--5cols > .Rtable-cell  { width: 20%; }
        .Rtable--6cols > .Rtable-cell  { width: 16.6%; }



        html { 
        height: 100%;
        background-color: #EEE; 
        }
        body {
        box-sizing: border-box;
        min-height: 100%;
        margin: 0 auto;
        padding: 2em;
        max-width: 800px;
        font-family: 'Josefin Sans', sans-serif;
        font-size: 1.2em;
        background-color: white;
        border: double 3px #DDD;
        border-top: none; border-bottom: none;
        }
        h1, h2, h3, h4, h5, h6 { margin-top: 0; }
        h3 { font-size: 1.2em; }
        h4 { font-size: 1em; }
        strong { color: darken(slategrey,20%); }
         p{ font-size: $fontsize}
             }

The output is only the text inside the div class=“Rtable-cell”'s. Any ideas why this is happening? Is it a conflict with bootstrap that I’m also using in the page?
ps: The sass is working, just to make sure i created a sass variable at theme/variables/scss. And called it inside my page.scss (p{ fontsize }) and it worked