How to load different Scss files with Meteor routed pages

Question

I'm creating a Meteor site routed with Iron Router. Every subpage has it's own folder and it's own Scss files. The problem is that all Scss files become available on every subpage after compiling.

It's easy to solve by adding html class="homePage" or html class="adminPage", then prefix styling with .adminPage {...code goes here...}, but when it comes to Excluding a Big files, such entire html5reset.scss, prefixing all names is not a good solution. How to exclude html5reset.scss files from a particular routes?

file structure
/homepage
  > global.scss
  > homePage.scss
  > html5reset.scss

/404
  > global.scss
  > 404Page.scss
  > html5reset.scss

/admin
  > global.scss
  > adminPage.scss
  // NO HTML5 reset

/framework
  > global.scss
  > frameworkPage.scss
  // NO HTML5 reset

And this is how i dynamically set html classnames:

HTML

<template name="homePage">
  {{HTML_CLASS 'homePage'}}
</template>

CLIENT JS

// dynamically set html class
Handlebars.registerHelper( "HTML_CLASS", function ( htmlClass ){
  var root = document.getElementsByTagName('html')[0];
  if (htmlClass) {
    root.setAttribute( "class", htmlClass );
  } else {
    alert("this page has not html class");
    root.setAttribute( "class", "otherPage" );
  }
});

Answer 1

There is a nicer way of putting classes on the html tag using iron-router:

Css class in body with Meteor

Excluding css in your client folder isn't possible, but there is a dirty way of achieving it by putting it in your public folder:

Excluding bootstrap from specific routes in Meteor