<h:outputStylesheet> 和相关引用答案

【问题标题】：<h:outputStylesheet> and relative references<h:outputStylesheet> 和相关引用
【发布时间】：2013-10-08 19:09:42
【问题描述】：

我有一个典型的 JSF 项目设置：

myproject
  |-- src/main/webapps
  |    |-- resources
  |    |    |-- css
  |    |    |     |-- 3rdparty.css
  |    |    |      
  |    |    |-- fonts  
  |    |         |    
  |    |         |-- myspecialfont.woff
  |    |

然后在我的 JSF html 中：

 <h:outputStylesheet name="3rdparty.css" library="css"/>

这很好用，因为如果我需要升级，我可以保持目录一致。

但是，在这种情况下，3rdparty.css 文件包含一个相对引用：

@font-face {
  font-family: 'Lato';
  src: url('../fonts/myspecialfont.woff');
}

由于 h:outputStylesheet 构造了使用 mywebapp/javax.faces.resource/3rdparty.css 的 URI，这将破坏其中的相对引用，因为该路径现在将引用 mywebapp/fonts/myspecialfont.woff。

有没有一种很好的方法来保留这些由 JSF 引用的本地托管的 3rd 方库来处理这种相对引用，而无需手动更改 CSS？

【问题讨论】：

试试url(#{request.contextPath}/resources/fonts/my.woff
是的，这可行，但我试图避免编辑第 3 方 CSS 文件以保持简单的更新路径。

标签： css jsf-2

【解决方案1】：

你有两个选择：

不要使用 outputStyleSheet，而是将其直接包含在您的模板中
修改 CSS 文件内容（按照 TemarV 的建议）

不幸的是，没有什么可以做的，因为资源是使用不同的路径呈现的，其中库和资源引用被指定为 URL 参数，而不是 URL 的一部分。

编辑：我还想强调第三个选项 - 编写自定义 ResourceHandler。我必须在这些方面做点什么。你可以阅读更多关于它的信息 -

http://roguexz.blogspot.in/2013/10/jsf-2-returning-resource-url-that-is.html

【讨论】：

我想选择 #1，但是我无法确定首先加载哪些 CSS 文件，因为 h:outputStylesheet 会立即将任何以这种方式获取的内容放在文档的开头。我自己的 CSS 需要覆盖 3rdparty.css 中的一些类。与此同时，我现在要走 #2 路。感谢您的意见。
如果你想控制 head 部分的内容组织，我建议你看看 primefaces 如何实现 first & last h:head 的方面。也可以帮助您解决选项 1。
如果您要使用选项 2，那么您可以使用简写符号 #{resource['libraryName:resourceName']} 而不是整个 contextPath EL。