Java EE, JSF and Less

Question

right now I'm working on my first ever Java project, a web application. I'm originally a PHP developer and I'm used to code stylesheets in Less and compile them with Gulp. So I thought that I could do the same thing, execept that I won't use Gulp but Maven.

At first, I couldn't get it working, but after an hour of Googling, I came up with the following (a part of pom.xml):

<plugin>
    <groupId>biz.gabrys.maven.plugins</groupId>
    <artifactId>lesscss-maven-plugin</artifactId>
    <version>1.1</version>
    <configuration>
        <sourceDirectory>${project.basedir}/src/webapp/styles</sourceDirectory>
        <outputDirectory>${project.build.directory}/${project.build.finalName}</outputDirectory>
        <compress>true</compress>
    </configuration>
</plugin>

Now each time I hit the Run button in Intellij IDEA, the stylesheets get compiled into the resulting WAR. The source tree looks like this:

I'm using Java Server Faces and I have a question regarding linking the compiled stylesheet. Previously when I was using plain CSS, I could put the stylesheet to the resources directory, then use h:outputStylesheet and the stylesheet got magically compiled and linked. Now I obviously can't do that and so I'm asking what is the best workflow when working with Less files in a JSF project?

Thanks.