javascript - 在 HTML 中自动嵌入样式表

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

我想开始

之前.css

.body { color: black }

之前.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>

一旦这个过程完成，我会得到

之后.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 来导出原始文件之前。

非常感谢

最佳答案

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

服务器端模板:

将样式表嵌入到 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>标签。

通过 JavaScript 使用 Ajax:

另一种解决方案是使用 Ajax 获取样式表的内容，然后使用 JavaScript 将其简单地放入 <style> 中。标签。例如，对于某些 jQuery，您可以执行以下操作:$("style").html(// stylesheet contents var); .

当然，如果有帮助，您也可以使用 Haml。

希望这能回答您的问题。

关于javascript - 在 HTML 中自动嵌入样式表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31401708/