CODEWITHSUNDEEP
ionic-frameworksassionic2
Neena Vivek
Neena Vivek

Reputation: 717

How to keep style rules separate for different pages in Ionic2 apps?

I have three different files app.scss, movie-info.scss, movie-list.scss. The app.scss file has the following comment in it:

Put style rules here that you want to apply globally. These styles are for the entire app and not just one component. Additionally, this file can be also used as an entry point to import other Sass files to be included in the output CSS.

This means the styles here will be applied to the whole app. For this reason, I put the styles for movie-info page inside movie-info.scss. However, the styles placed there still affect the movie-list page. Why is that? What is the purpose of using different scss files if the styles are being applied to the whole app?

Upvotes: 0

Views: 134

Answers (1)

Suraj Rao
Suraj Rao

Reputation: 29635

In your movie-info.scss file, there should be a namespace set. For example:

movie-info-page{
//css style here
}

This namespace is set in your component as selector.

@Component({
    selector: ' movie-info-page',
    templateUrl: 'movie-info.html',
})

Any style placed within the namespace is applied to the particular page. All styles outside is set as global and will be set from the page to all subsequent pages. If you want a global style for entire app, set in app.scss Hope this answers your question.

Upvotes: 2

Related Questions