How to expicitly load only specific (not all) css files in Meteor.js

Question

I want to develop a usual website with Meteor.js (not one-page web app) and I want to load only specific css files for every page. So not all pages share the same css code. Is it possible?

Answer 1

First off if you are using Meteor you are not building a "usual" site, you are building a very powerful SPA (single page application). You can imitate a "usual" website with introducing routing, try IronRouter.

OK now about CSS. Once you deploy Meteor all your CSS and JS are merged and minified. So if you want to achieve what you are asking you will need to add a package like this one.

https://atmospherejs.com/mrt/external-file-loader

https://github.com/davidd8/meteor-external-file-loader

Then attach it to trigger once a template is created:

Template.myCustomTemplate.created = function() {
  Meteor.Loader.loadCss("//example.com/myCSS/style.css");
};

I believe you could also load the CSS from the Meteor server through Meteor's Asset API. Read more here: https://docs.meteor.com/#/full/assets