css - 如何用meteor处理CSS？

Question

我正在构建一个测试应用程序来学习如何使用 METEOR 组织多个文件。

我有一个 head.html，里面有以下指向我的自定义 CSS 的链接:

<!-- Custom CSS -->
    <link type="text/css" rel="stylesheet" href="/stylesheets/globals/style.css"/>

很正常，但我很难让它发挥作用。

这是我的应用程序目录:

-app folder
---client
-----head.html
-----index.html
-----stylesheets
-------globals
---------style.css

我知道这似乎是一个非常基本的问题，但我无法弄清楚。

Answer 1

基本上，您有两种在 Meteor 元素中插入 CSS 的方法:

• 使用 Meteor 构建工具自动连接和缩小 client/ 目录中的所有 CSS 文件:在这种情况下，您不需要使用 header 中的链接标记导入样式表。这非常适合您的应用在启动时应加载的重要 CSS 文件。

示例:将 CSS 文件放在 client/stylesheets/globals/style.css 下即可，无需导入，Meteor 会自动将其注入(inject)到您的元素中。

• 使用在网络应用程序中导入样式表的经典方法:您可以将 CSS 文件放入 public/ 目录中，它们将由您的应用程序服务器提供服务。在这种情况下，Meteor 构建过程将被跳过，因此文件不会连接在一起或缩小。当您想要延迟加载仅在应用程序的子部分中需要的大型 CSS 文件(例如管理部分样式)时，请使用此方法。

示例:将缩小后的 CSS 文件放在 public/stylesheets/admin/style.css 下，并使用类似 iron:router 的内容在点击时加载 CSS 文件管理路线。

Router.route("/admin", {
  // onRun hooks executed only once
  onRun: function(){
    // create a link taf holding a reference to our publicly served CSS file
    var link=$("<link>",{
      rel: "stylesheet",
      href: "/stylesheets/admin/style.css"
    });
    // append to the head tag
    $("head").append(link);
  }
});