如何在 Meteor 中使用多个 CSS 文件

Posted 2023-03-08

技术标签:

【中文标题】如何在 Meteor 中使用多个 CSS 文件【英文标题】：How to use multiple CSS files in Meteor 【发布时间】：2014-05-14 14:52:35 【问题描述】：

我已经开始使用流星，想知道什么是迁移引用许多 CSS 文件的 html 文件的好方法。到目前为止，我发现meteor会自动按字母顺序加载所有CSS文件。我的两个问题如下：

我应该在哪里找到 CSS 文件？（或者我可以控制加载哪些目录）是否可以按特定顺序加载特定的 CSS 文件？

在迁移到流星之前，这是我的 HTML 文件中的当前参考。

    <!-- Web Fonts  -->
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800|Shadows+Into+Light" rel="stylesheet" type="text/css">

    <!-- Libs CSS -->
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/fonts/font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="vendor/owl-carousel/owl.carousel.css" media="screen">
    <link rel="stylesheet" href="vendor/owl-carousel/owl.theme.css" media="screen">
    <link rel="stylesheet" href="vendor/magnific-popup/magnific-popup.css" media="screen">

    <!-- Theme CSS -->
    <link rel="stylesheet" href="css/theme.css">
    <link rel="stylesheet" href="css/theme-elements.css">
    <link rel="stylesheet" href="css/theme-animate.css">

    <!-- Current Page Styles -->
    <link rel="stylesheet" href="vendor/rs-plugin/css/settings.css" media="screen">
    <link rel="stylesheet" href="vendor/circle-flip-slideshow/css/component.css" media="screen">

    <!-- Skin CSS -->
    <link rel="stylesheet" href="css/skins/blue.css">
    <!-- Custom CSS -->
    <link rel="stylesheet" href="css/custom.css">

    <!-- Responsive CSS -->
    <link rel="stylesheet" href="css/theme-responsive.css" />

感谢您的帮助！ :)

【问题讨论】：

你可以把你的css文件放在任何地方。加载顺序在文档中描述：docs.meteor.com/#structuringyourapp 【参考方案1】：

正如@imslavko 所说，您可以在https://guide.meteor.com/structure.html 找到 Meteor 行为

但是，这些规则与 .js 代码和 .htmltemplate 文件更相关：Meteor 将所有 .css 合并并最小化到一个文件中（只要它们由您提供，而不是在 CDN 上），因此您将在您的 <head> 中找到单个 <link rel="stylesheet"> 引用。

记得将所有前端文件放在client 文件夹中，以避免不必要的服务器加载和可用性。

因此您可以为.css 文件选择方便的文件夹结构，例如将它们全部放在client/stylesheets 中或使用其他子文件夹来更好地管理它们。

【讨论】：

某些 JS 文件的放置怎么样。我喜欢将我的自定义 js 文件放在页脚中，与我的应用程序的页眉区域相对。如何做到这一点？【参考方案2】：

meteor 中不需要提供样式表的参考。只需将您的 css 文件放在 client/stylesheets 文件夹中。 Meteor 会自动应用这些 CSS 规则。

【讨论】：

以上是关于如何在 Meteor 中使用多个 CSS 文件的主要内容，如果未能解决你的问题，请参考以下文章