我可以在 head 标签内自定义编译的 css 位置吗？答案

【问题标题】：Can I customize compiled css location inside head tag?我可以在 head 标签内自定义编译的 css 位置吗？
【发布时间】：2015-06-05 18:55:12
【问题描述】：

Meteor 将 css 文件编译成一个 css 文件，并将其作为 head 元素的第一个子元素插入到 html 中。

<head>
  <!-- meteor inserts my concatenated css file from client folder here -->
  <title>page</title>
  <link href="/sometheme/theme.css" rel="stylesheet">
  <!-- other css files here -->
</head>

我不想为我正在使用的主题资产创建一个包。我只想在上面的 html 中直接使用它们，我想在客户端文件夹中使用预处理器开发我的 css。

如何让流星将生成的 css 作为 head 的最后一个元素而不是默认的第一个元素注入？

谢谢

编辑：

为了进一步澄清，我希望流星注入编译后的 css，如下所示。我可以在 DOM 准备好后操纵 DOM 并移动该链接，但这是一个 hack。有 API 来配置它吗？

<head>
  <title>page</title>
  <link href="/sometheme/theme.css" rel="stylesheet">
  <!-- other css files here -->
  <!-- I WANT METEOR TO INJECT COMPILED CSS HERE -->
  <link rel="stylesheet" type="text/css" class="__meteor-css__" href="/main.css?da39a3ee5e6b4b0d3255bfef95601890afd80709">
</head>

【问题讨论】：

标签： meteor

【解决方案1】：

您可以在 css 文件的顶部使用 @import url; 声明。

main.css

@import '/sometheme/theme.css';

body {

}

这将在您的 css 之前加载 /public/sometheme/theme.css

【讨论】：

@import 将在 css 文件中创建额外的 http 请求。不理想。我想我必须使用 grunt、gulp 等构建工具来完成。令人沮丧....：/

【解决方案2】：

只需放置您的 css 主题，meteor 就会将其连接到现有 css 中。流星有一个特殊的方式与file order：

HTML 模板文件总是在其他所有内容之前加载
以 main 开头的文件。最后加载
接下来会加载任何 lib/ 目录中的文件
接下来会加载路径更深的文件
文件然后按整个路径的字母顺序加载

要实现您的目标，只需确保您的 css 比主题文件夹更深，并注意字母顺序

编辑：

如果您想从 /public 加载文件，只需将 <head></head> 放入 html 文件之一（例如：app.html）并在那里引用您的样式表。

app.html:

<head>
  <link href="/sometheme/theme.css" rel="stylesheet">
</head>

它将引用/public/sometheme/theme.css

【讨论】：

把我的css主题放在哪里？
将它放在客户端/样式表文件夹中。诀窍是获得正确的顺序。编辑了我的答案。
主题文件夹有javascript、font、css、less等文件。如果我将文件夹放在客户端，meteor 将处理（concat 等）我不想要的它们。我也不想重命名和更改主题文件夹中的任何内容。这就是我将它们放入公共文件夹的原因。您的文件优先级说明适用于非公用文件夹中的文件夹。所以，我只需要弄清楚我是否可以让流星将编译后的 css 作为 head 中的最后一个链接元素注入。
在这种情况下，您只需将放在一个 html 文件中
您可以将放在您拥有的任何 .html 文件中（在