在 HTML 中自动嵌入样式表

Question

我正在构建需要独立 html 文件的错误页面 (404/503)，我的服务器端是 nodejs，但这些文件将直接托管在 nginx 中。我正在尝试在 html 文档的顶部自动嵌入样式表，想知道是否有任何工具可用于此目的。搜索堆栈溢出和 google 不断将工具返回到内联 css 以用于电子邮件，但这不是我想要的。

我想从

开始

before.css

.body { color: black }

before.html

<!DOCTYPE html>
<html>
  <head>
    <title>A Question</title>
    <link rel="stylesheet" href="before.css">
  </head>
  <body>
    <p>Here be the answer</p>
  </body>
</html>

一旦该过程完成，我将得到

after.html

<!DOCTYPE html>
<html>
  <head>
    <title>A Question</title>
    <style>.body { color: black }</style>
  </head>
  <body>
    <p>Here be the answer</p>
  </body>
</html>

理想的解决方案是 gulp 插件或编写插件的想法。
如果需要，我可以用 JS 编写。此外，我已经在使用 EJS 和 Stylus 来导出原始文件之前。

非常感谢

Answer 1

正如许多人评论的那样，您正试图找到一个非常复杂的问题的解决方案，并且可能有许多易于使用的解决方法。但如果你真的想这样做，那么这里有一些我认为最好的方法：

服务器端模板：

将样式表嵌入 HTML 的最佳、简洁和直接的方法是使用服务器端脚本语言（正如@Mr_Green 所指出的）。有很多可供选择，当您使用 Node.js 时，最好的库是 EJS 或 Jade。您也可以使用 PHP、Ruby、Python 或任何您认为最好的，但思路是一样的：

首先，需要从样式表中读取内容，存储到变量中。在 Node.js 中，您可以使用 fs.readFile() 轻松阅读 .css 文件的内容。
然后，你必须将.css文件的内容（存储在一个变量中）输出到你的HTML中。以 EJS 为例，如果 CSS 文件的内容在变量 styleFile 中，那么您可以 <style><%= styleFile %></style> 直接将样式表的内容放入 HTML <style> 标签。

将 Ajax 与 JavaScript 一起使用：

另一种解决方案是使用 Ajax 并获取样式表的内容，然后使用 JavaScript 将其简单地放入 <style> 标记中。例如，对于一些 jQuery 你可以这样做：$("style").html(// stylesheet contents var);.

当然你也可以使用 Haml，如果有帮助的话。

希望这能回答您的问题。

在 HTML 中自动嵌入样式表

Automatically embed a stylesheet in HTML

html

javascript

css

build

gulp

before.css

before.html

after.html

服务器端模板：

将 Ajax 与 JavaScript 一起使用：