如何用流星处理 CSS？

Question

我正在构建一个测试应用程序以了解如何使用 METEOR 组织多个文件。

我有一个 head.html 并且里面有以下 link 我的自定义 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 文件：在这种情况下，您不需要使用 link 标记在头部。这非常适合您的应用在启动时应加载的重要 CSS 文件。

示例：将您的 CSS 文件放在 client/stylesheets/globals/style.css 下就可以了，无需导入它，它会由 Meteor 自动注入到您的项目中。

使用在 Web 应用程序中导入样式表的经典方法：您可以将 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);
  }
});

如何用流星处理 CSS？

How to handle CSS with meteor?

css

directory

structure

meteor