JSF最后添加自定义css答案

【问题标题】：JSF add custom css lastJSF最后添加自定义css
【发布时间】：2016-05-17 16:32:52
【问题描述】：

我正在尝试覆盖一些组件库的 css（PrimeFaces、BootsFaces），但最后无法导入我的自定义 css。到目前为止，我已经尝试了各种我发现的东西，但没有任何效果。下面是主模板，我在其中导入 css。就像它被导入一样，但在所有其他资源之前。之后，我列出了我进行的其他尝试。我可以想象，问题在于我使用了模板。

master.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:b="http://bootsfaces.net/ui"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title><ui:insert name="title">Project Documents Tutorial</ui:insert></title>
        <h:outputStylesheet name="css/projdocstut.css" />
    </h:head>
    <h:body>
        <b:container>
            <div id="header" class="header">
                <b:row>
                    <b:column span="12">
                            <ui:insert name="header">
                                <ui:include src="top-menu.xhtml" />
                                <ui:include src="main-menu.xhtml" />
                            </ui:insert>
                    </b:column>
                </b:row>
            </div>
            <div id="content" class="content">
                <b:row>
                    <b:column span="12">
                        <ui:insert name="content">Standard Content</ui:insert>
                    </b:column>
                </b:row>
            </div>

            <div id="footer" class="footer">
                <b:row>
                    <b:column span="12">
                        <ui:insert name="footer">Standard Bottom</ui:insert>
                    </b:column>
                </b:row>
            </div>
        </b:container>
    </h:body>
</html>

我还尝试了以下方法。

1) 在头部/正文中添加以下内容 --> 结果：根本没有导入

<f:facet name="last">
    <h:outputStylesheet library="default" name="css/projdocstut.css" />
</f:facet>

2) 在头部/正文中添加以下内容：result--> 资源在所有其他资源之前导入

<f:facet name="last">
        <h:outputStylesheet name="css/projdocstut.css" />
    </f:facet>

3) 在正文中添加以下内容：结果 --> 资源在所有其他资源之前导入

<h:outputStylesheet name="css/projdocstut.css" />

使用模板的index.xhtml：

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <ui:composition template="WEB-INF/templates/master.xhtml">    
            <ui:define name="content">
              Custom Content
            </ui:define>
    </ui:composition>

</html>

【问题讨论】：

我会说没有 2 是正确的。也许您是 css 特异性的受害者（如果您不知道，请阅读），您可以通过输入“！important;”进行测试在css中的一些行之后。那个或 css 文件不在正确的位置，webapp\resources\css。还将命名空间更改为 xmlns:ui="xmlns.jcp.org/jsf/facelets" 和 xmlns:f="xmlns.jcp.org/jsf/core"
抱歉不知道那些“;”在哪里来自
这有用吗？ stackoverflow.com/q/8367421，特别是 PrimeFaces 部分。
@Jaqen H'ghar：在呈现的 HTML 中引用了 css，所以这不是问题。问题在于，它是在 JSF 组件提供者（Primefaces、Bootsfaces）提供的所有其他 css 文件之前导入的。
根本原因是什么？您使用的是 Mojarra 还是 MyFaces？无论如何，假设“普通”PrimeFaces，＃2应该真的适合你（仅当放置在头部而不是身体时）。也许 BootsFaces 在这个问题中发挥了作用，因为我没有亲身体验，所以无法从头顶上分辨出来。您最好尝试在一个暂存器项目中重现该问题，其中一个和另一个的配置最少。

标签： css templates jsf primefaces

【解决方案1】：

Bootsfaces 通过允许您在 <h:outputStylesheet> 标记中定义“位置”属性来处理此 issue。

<h:head>
  ...
  <h:outputStylesheet name="css/style.css" position="last"/>
</h:head>

【讨论】：

Modesty 需要我补充一点，这个功能是受 PrimeFaces 启发的。我不确定他们是否仍然支持它，但请查看 here 以了解它过去是如何工作的。