Adding resources css&js into the page

Reading Time: < 1 minute

Importing resources files for instance css and js can be really painful, which actually caused me tons of trouble to implement them. I’ve checked out many of examples on the internet, all they say it to create a folder named css for css files and js folder for javascript files in src/main/resources. So I did give it a shot, but sadly did not work on me.

So eventually I was testing things out and finally I’ve come up with the solution. The below graphic shows to where create the folder underneath webapp create folder called resources once again under that folder create your folders css and js for script and style schema files. Study the graphic below

IntelliJResourcesJSF

and then in your .xhtml file

CSS call

<h:head>
    <title>Home!!</title>
    <h:outputStylesheet library="css" name="styles.css" />
</h:head>

JS call

<h:head>
    <title>Home!!</title>
    <h:outputScript library="js" name="loader.js" />
</h:head>