'Ordering <h:outputStyleSheet> and <link rel="stylesheet"> swapped

In my JSF 2.2 Facelet I have the following code:

<html  ... >
  <f:view>
    <h:head>  
       <h:outputStylesheet name="bootstrap-lib/css/bootstrap.css" />
       <h:outputStylesheet library="jquery-ui" name="css/jquery-ui.css" />
       <link rel="stylesheet" type="text/css" href="url.to.css" />
      ...
    </h:head>
    ...
  </f:view>
</html>

This outputs however:

<html ...>
  <head>
    ...
    <link rel="stylesheet" type="text/css" href="url.to.css" />
    <link type="text/css" rel="stylesheet" href=".../javax.faces.resource/bootstrap-lib/css/bootstrap.css.xhtml?con=bootstrap" />
    <link type="text/css" rel="stylesheet" href=".../javax.faces.resource/css/jquery-ui.css.xhtml?ln=jquery-ui&amp;con=bootstrap" />
    ...
  </head>
  ...
</html>

The sorting of the stylesheets defined in link and outputStylesheet are ignored and the 'outputStyleSheet' stylesheets are always placed last.

I need the "url.to.css" stylesheet defined with the 'link'tag as last in the list, so it will be dominant. How can I fix this?

htmlcssjsfjsf-2.2facelets


Solution 1:[1]

Fixed with @import:

Facelet:

<html ...>
  <head>
    ...
     <h:outputStylesheet name="css/all.css" />
    ...
  </head>
  ...
</html>

all.css

@import url("#{resource['bootstrap-lib/css/bootstrap.css']}");
@import url("#{resource['jquery-ui:css/jquery-ui.css']}");
@import url("url.to.css");

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Vinayak

Related Questions