How do you make scss only apply to one page?

Hi there, (ionic 3.19.0)

i im used to have the same classes for styling in every page, so my root div on a page always has class=“maincontainer” and so on.

with ionic the code of .maincontainer{} in the different pages overlap.

is there a way to change this behaviour ? :slight_smile:

i know i could add things like page1-maincontainer page2-maincontainer,
but this becomes quite frustrating easily :slight_smile:

thanks to everybody :slight_smile:

1 Like

If I’m not saying something wrong, I think that’s the purpose of the selector


// Define a `selector`
  templateUrl: 'my-page.html',
  selector: 'my-page' 
export class MyPage {


// Here encapsulate the css dedicated to your page with the
// selector you defined in your class
my-page {
    .maincontainer {
      color: red;

Wow, thank you so much :slight_smile: im glad it is that easy and customizable :slight_smile: best solution ever :slight_smile: thanks again :slight_smile:

1 Like

My pleasure, have fun!

1 Like