Question

我知道之前已经问过这个问题，但我想知道1.0的出现是否有什么变化。

我不希望Meteor自动将我应用中的每个CSS文件捆绑在一起。我的管理页面将具有与面向客户端的页面完全不同的CSS，并且使用命名空间似乎是一个非常复杂的解决方案。如何让Meteor在某些页面上加载某些CSS文件而不在某些页面上加载某些CSS文件？

同样的问题适用于JS文件。

我知道有人说这会很有用：

https://github.com/anticoders/meteor-modules

有关条件CSS和JS的这个包的任何评论？

Answer 1

您可以将CSS文件放在/ public下，并在需要时手动将其包含在模板中。 / public下的所有内容都不会被捆绑，并且URL将被删除/ public。例如

创建两个文件：your_meteor_project / public / one.css和....... / two.css。这些内容可以从http://example.com/one.css的客户处获得（即＆＃34;公共＆＃34;不构成网址的一部分，它就像使用meteor作为普通旧网络服务器的文档根目录一样）。 meteor create cssSwitcher cd cssSwitcher/ mkdir public echo 'html, body { background-color: red; }' > public/one.css echo 'html, body { background-color: blue; }' > public/two.css
创建对辅助函数的引用＆＃34; properStylesheet＆＃34;在HTML的开头：

HTML模板

<!-- add code to the <body> of the page -->
<body>
  <h1>Hello!</h1>
  {{> welcomePage}}
</body>

<!-- define a template called welcomePage -->
<template name="welcomePage">
  <!-- add code to the <head> of the page -->
  <head>
    <title>My website!</title>
    <link rel="stylesheet" href="{{appropriateStylesheet}}" type="text/css" />
  </head>

  <p>Welcome to my website!</p>
  <button id="red">Red</button>
  <button id="blue">Blue</button>
</template>

创建帮助函数。

使用Javascript：

if (Meteor.isClient) {
  Session.set("stylesheet","red.css"); 

  Template.registerHelper("appropriateStylesheet", function() {
    return Session.get("stylesheet");
  });

  Template.welcomePage.events({
    'click #blue': function() { Session.set("stylesheet","two.css"); },
    'click #red': function() { Session.set("stylesheet","one.css"); },
  });

}

您可以使用JS文件执行完全相同的操作。把它们放在/ public下面，流星忽略它们。

如何在Meteor 1.0中有条件地加载/捆绑CSS文件？

1 个答案: