JSF不读取外部CSS文件

Question

i have an external CSS file in the resources folder under WebContent folder, and i included it at the page header as follows:

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

i tried a simple selector to test the if the file is working like body {background-color:#b0c4de;} but unfortunately the file isn't linked

for more clarity i included here a screenshot for the exact location of the resources folder

Answer 1

First of all, this is not an external CSS file at all. It's internal to your web application. A real external CSS file would be served from a different domain and is not importable via <h:outputStylesheet> , but only via <link> .

Your concrete problem is caused because you unnecessarily repeated the CSS file folder into the library attribute. Just get rid of it.

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

The library attribute must represent the common module/theme/library name, such as "primefaces", but you don't have any here. Using a library name of "css" makes no utter sense as "css" just represents the file/content type.

See also:

• How to reference CSS / JS / image resource in Facelets template?
• What is the JSF resource library for and how should it be used?

Answer 2

Try h:outputStylesheet name="style.css" library="css" />

here is a ref: http://www.mkyong.com/jsf2/how-to-include-cascading-style-sheets-css-in-jsf/