如何处理与流星的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

基本上你有一个流星项目将CSS的2种方式：

• 使用流星构建工具来自动拼接，然后再缩小所有的CSS文件居住在client/目录：在这种情况下，你不需要在头部使用链接标签导入样式表。这对您的应用在启动时加载的重要CSS文件来说非常完美。

例：把你的CSS文件client/stylesheets/globals/style.css下，就是这样，没有必要将其导入，它会自动在你的项目由流星注入。

• 使用进口在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); 
    } 
});