如何在 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 下的所有内容都不会被捆绑，并且 URL 将删除/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 的一部分，它就像使用meteor 作为普通旧 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 的头部创建一个对辅助函数propertyStylesheet"的引用:
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 下，meteor 会忽略它们.
You can do exactly the same thing with JS files. Put them under /public and meteor ignores them.
这篇关于如何在 Meteor 1.0 中有条件地加载/捆绑 CSS 文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
