如何在Meteor 1.0中有条件地加载/捆绑CSS文件? [英] How to conditionally load / bundle CSS files in Meteor 1.0?
问题描述
我知道已经问过这个问题，但是我想知道1.0的出现是否有所改变.
I know this question has been asked before but I'm wondering if something has changed with the advent of 1.0.
我不希望Meteor将应用程序中的每个CSS文件自动捆绑在一起.我的管理页面将具有与面向客户的页面完全不同的CSS，并且使用名称空间似乎是一个过于复杂的解决方案.我如何让Meteor在某些页面上加载某些CSS文件而不在某些页面上加载某些CSS文件?
I don't want Meteor to automatically bundle together every single CSS file in my app. My admin pages are going to have a completely different CSS than my client-facing pages and using namespaces seems like a really over-complicated solution. How do I have Meteor load certain CSS files on certain pages and NOT load certain CSS files on certain pages?
JS文件也有同样的问题.
The same question goes for JS files.
我知道有人说这会有用:
I know someone said this would be useful:
https://github.com/anticoders/meteor-modules
对此程序包中的条件CSS和JS有何评论?
Any comments on this package for conditional CSS and JS?
推荐答案
您可以将CSS文件放在/public下的某个位置，并在需要时从模板中手动添加它们. /public下的所有内容都不会捆绑在一起，并且网址中的/public也将被删除，例如
You can just put your CSS files somewhere under /public and manually include them from your templates where required. Everything under /public will NOT get bundled, and the URL will have the /public removed e.g.
- 创建两个文件:your_meteor_project/public/one.css和......./two.css.您可以在 http://example.com/one.css (即"public"不构成URL的一部分，就像将流星用作普通的旧Web服务器的文档根目录一样.
- Create two files: your_meteor_project/public/one.css and ......./two.css. These will be available from your client at http://example.com/one.css (i.e. the "public" does not form part of the URL, it's like the document root for using meteor as a plain old web server).
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
-
在HTML的开头创建对辅助函数"appropriateStylesheet"的引用:
Create a reference to a helper function "appropriateStylesheet" in the head of your 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>
-
创建一个辅助函数.
Create a helper function.
JavaScript:
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下，而流星会忽略它们.
You can do exactly the same thing with JS files. Put them under /public and meteor ignores them.
这篇关于如何在Meteor 1.0中有条件地加载/捆绑CSS文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
