Set Different CSS file for different page

help
#1

Hello Guys,

I wanted to know if we can include seperate CSS file for each page

say suppose i have 3 pages x,y,z and three CSS file c1,c2,c3

I wanted to know if its possible to include CSS file c1 and c2 for page x

how can I acheive that?

Please Note:i’m using metero along with angular js.

#2

I’m not familiar with Angular, but you may try preloader package.

#3

I believe you can put the styles in the header of each html page - which whilst not seperate css files would have the same effect.

#4

One option is to use kadira:dochead.
It allows you to set header tags via javascript. What this means is that you could put your dochead code (which is dead simple) inside your router. Just put your CSS files in your public folder so they are excluded from the default build process.

Here is an example of how I use it to load the dropbox password strength meter javascript only on the signup page.

FlowRouter.route('/signup', {
  action() {
    //Load password strength  script only on signup page
    DocHead.loadScript("https://cdnjs.cloudflare.com/ajax/libs/zxcvbn/4.2.0/zxcvbn.js");
    //If the user is not signed-in, show this
    if (!Meteor.user()) {
      ReactLayout.render(MainLayout, {content: <SignUp />});
    }
  }
});

Hope this helps!

1 Like