Question

我构建了错误页面（404/503），这些页面需要是独立的html文件，我的服务器端是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在文件之前导出原文。

非常感谢

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>标记中。< / LI>
在JavaScript中使用Ajax：

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

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

希望能回答你的问题。

自动在HTML中嵌入样式表

before.css

before.html

after.html

1 个答案:

服务器端模板：

在JavaScript中使用Ajax：