CODEWITHSUNDEEP
cssmeteor
JoshJoe
JoshJoe

Reputation: 1640

How can I load css file in Meteor for just one page?

I have three css files that I only want loaded on a specific page or template. How can this be done in Meteor. I have already tried appending the css files to the head area on template creation, but this doesn't work because those files stay loaded when I navigate away from this page.

Upvotes: 1

Views: 1408

Answers (1)

bkuri
bkuri

Reputation: 36

I solved this with a very simple custom layout which adds the name of the template in the first div. On your main template:

<head>
  <title>Your title</title>
  ...
</head>

<template name="layout">
  <div class="container-fluid {{template}}">
    <header>
      <h1>Testing</h1>
      ...
    </header>
    <div class="row">
      ...
    </div>
  </div>
</template>

Add the following template helper:

Template.layout.helpers({
  template: function () {
    route = Router.current();
    return route? route.lookupTemplate() : 'home';
  },
  ...
});

Your CSS can now be isolated to a single page by simply adding your template's name as a root class, like so:

.templateName header h1 { color: red; }
.templateName div.row { max-height: 300px; }
...

Finally, remember to point Iron Router to your layout template:

Router.configure({
  layoutTemplate: 'layout',
  ...
});

Upvotes: 2

Related Questions