Conditionally include css files with meteor

Question

I am making a "multipage" app with meteor and would like to use different css files per page. Is this possible?

I actually upvoted this its a good question, Meteor doesn't use conventional style pages, rather in a router. — Tarang
– Tarang, Commented Mar 13, 2013 at 11:33
I upvoted too. I'm here to look for solutions to include different js scripts for multipage app. — huggie
– huggie, Commented Jun 3, 2013 at 10:03

handmade · Accepted Answer · 2013-03-12 22:27:00Z

6

Meteor doesn't allow (currently) helpers inside the tag.

Rapid way: wrap all your content inside a div with an #id an then use stylus to wrap all the css rules ander that tag:

#myPagewrap1
  #row
    some: rule

#myPagewrap1
  #row
    some: rule

Long way: attach some dynamic css call to the .created method of your template.

Template.myPage.created = function(){
  loadStyle("pathtostyle.css");
}

answered Mar 12, 2013 at 22:27

handmade

2013 silver badges3 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Thanks! Went with this: Template.customPage.created = function () { $('head').append('<link rel="stylesheet" href="custom.css"/>'); };

Make sure to add a condition to check if the stylesheet has already been added to the head, otherwise you'll have a bunch of duplicates.

this is not working. Meteor automatically pushes all the css files to the client.

@piedpiper put your CSS files in /public.