Add CSS to one page only with Ionic 2

Question

I know that in Ionic 2 I can write style code in page-specific SCSS files in /app/pages/page-name/page-name.scss, and then include links to these in /app/theme/app.core.scss. However, this way the page-specific style codes go into the complete app style file, increasing it's size even for pages that many users might never access.

How can I create style code (either inside it's own CSS/SCSS file, or inside a style block in the rendered page) that is only included in one specific page? Is this even recommended in Ionic?

score 3 · Answer 1 · answered Jul 01 '16 at 00:51

See angular2 documentation, not sure it will work with the url templates without modifying the gulpfile but this should get you started
=> https://angular.io/docs/ts/latest/guide/component-styles.html#!#using-component-styles

@Component({
  selector: 'hero-app',
  template: `
    <h1>Tour of Heroes</h1>
    <hero-app-main [hero]=hero></hero-app-main>`,
  styles: ['h1 { font-weight: normal; }'],
  directives: [HeroAppMainComponent]
})

or a specific url

@Component({
  selector: 'hero-details',
  template: `
    <h2>{{hero.name}}</h2>
    <hero-team [hero]=hero></hero-team>
    <ng-content></ng-content>
  `,
  styleUrls: ['app/hero-details.component.css'],
  directives: [HeroTeamComponent]
})

score 1 · Accepted Answer · edited May 23 '17 at 12:25

That's not recommended in Ionic and I don't really understand what's the benefit of doing that, because the styles are then minified, so the size of the final style file won't be reduced that much (and you will have to modify a lot of things to try to make it work that way).

Even though, you could modify your gulpfile.js in order to change the way it works by default (minifying and putting all your styles together in one file) in order to make each scss file (belonging to a single page) to be compiled in a single css file per page (located in a www/styles folder) and then importing them in each ionic page's html with

<link md-href="styles/pageStyle.css" rel="stylesheet">

you will have to import those styles in the body of the html page (because Ionic app gets loaded inside <ion-app></ion-app> which is inside the body of the index.html page).

As you can see here that works in all modern browsers, but I'm sure that's not the recommended way to work with Ionic, and I don't think it worth the effort.

Add CSS to one page only with Ionic 2

2 Answers2