javascript - 如何使用 Meteor 路由页面加载不同的 Scss 文件

Question

我正在创建一个使用 Iron Router 路由的 Meteor 站点。每个子页面都有自己的文件夹和 Scss 文件。问题是编译后，所有 Scss 文件在每个子页面上都可用。

通过添加 html class="homePage" 或 html class="adminPage" 即可轻松解决，然后在样式前添加 .adminPage {...代码在这里...}，但是当涉及到排除大文件时，例如整个 html5reset.scss，为所有名称添加前缀并不是一个好的解决方案。如何从特定路由中排除 html5reset.scss 文件？

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

这就是我动态设置 html 类名的方式:

HTML

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

客户端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

有一种更好的方法可以使用iron-router 将类放在 html 标签上:

Css class in body with Meteor

在客户端文件夹中排除 css 是不可能的，但是有一种肮脏的方法可以通过将其放入公共(public)文件夹来实现它:

Excluding bootstrap from specific routes in Meteor