css - 如何在 Meteor 中只加载一页的 css 文件?

标签 css meteor

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

最佳答案

我用一个非常简单的自定义布局解决了这个问题,它在第一个 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',
  ...
});

关于css - 如何在 Meteor 中只加载一页的 css 文件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25777088/

相关文章:

JQuery 选择器帮助

html - 如何使复选框兼容 IE7 和 IE8? (使用 jQuery)

html - CSS 单选按钮和文本轮廓

jquery - Bootstrap 导航选项卡最后一个元素的错误

javascript - 基于元素数组中的父属性构建javascript树

javascript - Meteor 嵌套 View 和产量

javascript - 发现 meteor 取消订阅?

css - 当父元素溢出设置为隐藏时更改子元素的宽度

meteor - meteor ,浏览器策略,HTTP连接到S3的502网关错误

javascript - Meteor:使用 ReactiveVar 创建一个加载小部件来订阅用户集合