SCSS not scoping or cascading properly?

Ionic Framework ionic-v3
1

I’m having this problem in the branch I’ve updated to rc.1. Styles I define in a component-or-page-specific .scss file are getting overridden by default Ionic styles for that platform. For example, I have the following defined in a page-styles.scss file in my src/pages directory:
ion-content, .text-content {
color: white;
text-align: center;
}
In practice this is getting overridden by this, somewhere, I don’t know where, but in Ionic’s default styles:
.content-md {
color: #000;
background-color: #2f333d;
}

When I run the beta.11 version and compare, I see that that .content-md is still showing up, but IS being overridden by my styles. What’s going on?

2

I had the same problem. Now i create a class in the page-styles.scss with a class

.page-style {
–your styles–
}

and I apply that class to my page html ion-content element.

3

That didn’t seem to work, but wrapping my page-styles and component-styles thus:

.ios, .md {
- my styles -
}

did seem to work. Thank you.