如何在 <style> 中包含样式表的内容？答案

【问题标题】：How to include the contents of a stylesheet in <style>?如何在 <style> 中包含样式表的内容？
【发布时间】：2013-04-03 21:29:05
【问题描述】：

我有一个使用这个的 JSF 2.0 页面：

<h:head>
<h:outputStylesheet name="screen.css" library="css" />
</h:head>

这很好地生成了这个 HTML：

<head>
<link type="text/css" rel="stylesheet" 
    href="/myapp/javax.faces.resource/screen.css.jsf?ln=css" />
</head>

当在浏览器中查看页面时，这非常有用。但是，我想使用这个嵌入在 HTML 页面中的样式表，该页面将通过电子邮件发送给用户。我不希望他们的电子邮件客户端从服务器加载样式表。我希望通过电子邮件发送给他们的文档是自给自足的，并且不受网站样式表更改（甚至不存在）的影响。

我希望 HTML 输出是这样的：

<head>
<style type="text/css">
    ...contents of screen.css here...
</style>
</head>

我试图通过使用这个来实现：

<h:head>
<style type="text/css">
<ui:include src="/resources/css/screen.css"></ui:include>
</style>
</h:head>

但是我收到了这个错误：

javax.servlet.ServletException: Error Parsing /resources/css/screen.css: 
Error Traced[line: 1] Content is not allowed in prolog.
javax.faces.webapp.FacesServlet.service(FacesServlet.java:325)

如何让样式表的内容出现在文档的头部？

【问题讨论】：

标签： html css jsf jsf-2

【解决方案1】：

不适用于标准 JSF 组件。

JSF 实用程序库OmniFaces 有一个<o:resourceInclude>，其目的就是将非JSF webapp 资源的原始输出包含在JSF 页面中。

<h:head>
    <style type="text/css">
        <o:resourceInclude path="/resources/css/screen.css" />
    </style>
</h:head>

请注意，这不支持资源本地化和版本控制，也不像 <h:outputStylesheet> 那样评估 CSS 文件中的 EL 表达式。

【讨论】：

谢谢，@BalusC。不过，我宁愿避免在我的项目中添加另一个库只是为了获得这个功能。你还有其他建议吗？如果有帮助，我的项目也使用 RichFaces。我不知道该库是否有任何可以帮助我的功能。也感谢您改写我的问题！
OmniFaces 是开源的。只需根据其来源自己创建相同的组件。 RichFaces 没有这样的东西，它只针对纯 UI 组件，而不是通用实用程序。 OmniFaces 在这方面相当独特。