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

时间:2014-12-03 03:40:35

标签: meteor

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

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

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

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

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

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

1 个答案:

答案 0 :(得分:2)

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

  1. 创建两个文件:your_meteor_project / public / one.css和....... / two.css。这些内容可以从http://example.com/one.css的客户处获得(即"公共"不构成网址的一部分,它就像使用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

  2. 创建对辅助函数的引用" properStylesheet"在HTML的开头:

  3. 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>
    
    1. 创建帮助函数。
    2. 使用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下面,流星忽略它们。