在 Meteor 中为特定页面加载特定的 css 文件

Question

我有 3 个页面说 x、y、z 和 3 个 CSS 文件 c1、c2、c3

现在，如果我想包含页面 x 的 c1 和 c2 CSS 文件，而不是包含所有三个 CSS 文件 c1、c2 和 c3。

我们如何在流星框架中实现这一点？

Answer 1

如similarquestions 中所述，Meteor 在部署时将所有 CSS 捆绑在一起，因此要解决此问题，您需要使 CSS 对 Meteor 不透明并自行加载。一种快速而肮脏的方式：

• 将样式表移动到项目的 /public 文件夹 (more info here)

• 将<script> 添加到每个相关模板（例如在 x.html 中）以根据需要注入 CSS：

  $(document).ready( $('head').append($("<link rel='stylesheet' href='c1.css' type='text/css' />")) );

您也可以不使用 jQuery 来实现这一点，但一般来说，这样的解决方案不会很漂亮，并且可能会导致 UI 因样式延迟加载而闪烁，因此您应该考虑是否真的有必要在你的应用程序。