如何在 Meteor 中仅加载一页的 css 文件？答案

【问题标题】：How can I load css file in Meteor for just one page?如何在 Meteor 中仅加载一页的 css 文件？
【发布时间】：2014-09-12 07:23:10
【问题描述】：

我有三个 css 文件，我只想加载到特定页面或模板上。如何在 Meteor 中做到这一点。我已经尝试在创建模板时将 css 文件附加到头部区域，但这不起作用，因为当我离开此页面时，这些文件仍处于加载状态。

【问题讨论】：

可能与以下内容重复：stackoverflow.com/questions/25456293/…

标签： css meteor

【解决方案1】：

我用一个非常简单的自定义布局解决了这个问题，它在第一个 div 中添加了模板的名称。在您的主模板上：

<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>

添加以下模板助手：

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

现在只需将模板的名称添加为根类即可将您的 CSS 隔离到单个页面，如下所示：

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

最后，记得将 Iron Router 指向你的布局模板：

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

【讨论】：

你是如何使用 {{template}} 帮助器返回模板的名称的？命令是什么？谢谢
这行得通，但我只是将模板插入包装在像这样的 div 中
{{> Receipt}}
。然后我不得不使用 .less 文件并按照您的建议包装它们。不知道为什么，但 Meteor 不允许我用另一个 CSS 类包装我的 CSS 文件。
@JoshOne 我刚刚添加了缺少的模板帮助程序并将示例更改为显示 CSS 而不是 LESS。对此感到抱歉。