How to load stylesheets for specific templates

help
1

I am trying to load different stylesheets for the admin and for the front end of my site. I am using sass and have the files in client/stylesheets, but meteor just loads them all. Is there any way to do this?

1 Like
2 
Here's in CSS.

HTML:
<template name = "admin">
  <div class = 'admin'>
    content
  </div>
</template>

CSS:
.admin {
     border-color: green;
}
3

This won’t work. I can’t wrap everything in .admin because I have templates that I need to load in too that I bought and they require special classes on html and body etc. I need a way to load in only certain stylesheets depending on the template.

4 
<template name = 'style_css'>
<style>
CSS
</style>
</template>

<template name = 'admin_layout'>
{{>style_css}}
{{>admin}} or {{>yield}}
</template>
5

Unfortunatly that won’t work either since I need to be able to load my admin and front end sass styles (.scss files).

6

Guess it’s time for me to go sleep. lol

Don’t know about sass, good luck.

7

You can put the stylesheets used by /admin in the /public folder and then refer to them manually from the <head> element (eg. with {{#if admin}}<link ...>{{/if}}.

8

@rahul Will .scss files work in the public folder though?

9

@rahul Also, it looks like you can’t use blaze/handlebars in the head tag.

10

I guess you would have to pre-render your scss files into css and put them on the public folder. Meteor would just bundle them with the scss files for the regular site anyway.

For the head problem, maybe use the rendered/destroyed events to add/remove the link tag to the head through javascript. A bit hacky but I think it would work.

11

I ran into this same issue.
I wanted to use a helper to set the page <title> but couldn’t… that was a little frustrating, felt very hacky to work around it.

12

Same for me, did you find any solution ?