在 HTML 中自动嵌入样式表答案

【问题标题】：Automatically embed a stylesheet in HTML在 HTML 中自动嵌入样式表
【发布时间】：2015-07-14 08:36:28
【问题描述】：

我正在构建需要独立 html 文件的错误页面 (404/503)，我的服务器端是 nodejs，但这些文件将直接托管在 nginx 中。我正在尝试在 html 文档顶部自动嵌入样式表，并且想知道是否有任何工具可用于此目的。搜索堆栈溢出，谷歌不断将工具返回到内联 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 来导出原始文件。

非常感谢

【问题讨论】：

为什么要这样做？您使用什么服务器语言？
如果您没有找到简单的方法来做到这一点...主要是因为这是一个坏主意，或者您正在进行一项伟大的创新...您为什么要这样做？跨度>
您似乎在寻找 HTML 预编译工具。有许多。看翡翠或哈姆尔。这是related post。

标签： javascript html css build gulp

【解决方案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> 标记中。

在 JavaScript 中使用 Ajax：

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

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

希望能回答你的问题。

【讨论】：

感谢您抽出宝贵时间回答@Abraar-Arique。你的回答让我想到了正确的方向。
@David 没问题。编码愉快！