How to have a scss file for only one Component

Hi, I have a few components in my ionic project and for each component I have a new Folder with the .ts, .html and . scss in it. Now I noticed, that the .scss file in one of the folders works for ALL other components too.
How can I have a .scss file for ONLY ONE COMPONENT?
I would appreciate any answer!

it should work only for the specific component not for the entire app

But it doesn’t…
Here a video of my problem: https://workupload.com/file/eEehzvW
I change the p {} tag in a stylesheet for another component and the font-color is also changed in all the other components. And the view you see on the video is the CreateMultipleChoice.html…

I’m not watching a video. Post your scss.

The css rule needs to be specific to your component

When an ionic project is built, all the sass files get compiled into one massive stylesheet.

When generating a component/page, a .scss file is generated. This file contains a css selector generated from the component name. You want to keep all your component specific css in that selector.

page-contacts {
  /* Place CSS classes specific to the component in between here */
  font-size:15px;
  .standout {
    color:red;
  }
}
2 Likes

To clarify the the solution of @ccdex_chris

In his example, page-contacts, would need to be specified in the typescript class like following:

@Component({
    selector: 'page-contacts', // <-- There is the key
    templateUrl: 'whatever.html'
}) 

Meaning, the selector you specify gonna encapsulate your component once rendererd. Therefore, if you also encapsulate all your css into that same selector, only this component style gonna be affected

Like this html would be rendered as:

 <body>
    <page-contacts>
       <!-- your component stuffs are here-->
       <div class="example">Hello</div>
    </page-contacts>
 </body>

So for example, your scss to have an influence on just the div of your component would be:

page-contacts {
          div {
              &.example {
                   color: red;
              }
          }
  }

Not sure I really helped to make things clear, I hope so

4 Likes

Thank you very much that helped a lot! But one more question: Do I have to write the selector in the html too or does it happen automatically?

Thank you! Works great!

It happens automatically respectivelly only “need” to be specified in the typescript and scss files

1 Like

Thank very much! :smile:

1 Like

You’re welcome, glad I could help