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

【问题标题】：How to load different Scss files with Meteor routed pages如何使用 Meteor 路由页面加载不同的 Scss 文件
【发布时间】：2015-06-10 17:15:50
【问题描述】：

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

通过添加html class="homePage" 或html class="adminPage" 很容易解决，然后使用.adminPage {...code goes here...} 前缀样式，但是当涉及到排除大文件时，例如整个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" );
  }
});

【问题讨论】：

标签： javascript meteor sass iron-router file-structure

【解决方案1】：

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

Css class in body with Meteor

在您的客户端文件夹中排除 css 是不可能的，但是通过将它放在您的公用文件夹中来实现它是一种肮脏的方式：

Excluding bootstrap from specific routes in Meteor

【讨论】：

因为我只需要排除 CSS 重置，这可能是解决方案；）。将页面标题注册为助手允许我在模板中定义标题，这非常有用。
根据您的建议，我使用公用文件夹来包含特定于路由的 css/js 文件并为其编写了一个助手：stackoverflow.com/a/30833068/3836715