Question

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。

如何让meteor将生成的css注入头部的最后一个元素而不是默认的第一个？

由于

修改：

为了进一步澄清，我希望meteor注入编译后的css，如下所示。我可以操作DOM并在DOM准备好之后移动该链接但它是一个黑客。是否有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>

Answer 1

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

的main.css

@import '/sometheme/theme.css';

body {

}

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

Answer 2

只需放置你的css主题，meteor就会将它连接到现有的css中。 Meteor与file order有一种特殊的方式：

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

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

编辑：

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

app.html：

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

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

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

2 个答案: