On the fly LESS compiler for java web app?

Question

I am looking for a way to compile CSS LESS files on the server side on demand during development. For example if the browser makes a request to /assets/css/foo.css I want the server to notice that there is an /assets/css/foo.less file and then to have this file complied and the resulting css returned. I am guessing there must be a LESS servlet somewhere that can do this?

I am running tomcat 7 with Spring MVC application

How do I configure a Java Web App to do on the fly LESS compilation?

Answer 1

I think what you are looking for is a Servlet Filter. I was not aware of an off the shelf one that does LESS compiling and would have started to make one using lesscss-java, but now I can see there is a larger project called Web Resource Optimizer for Java - wro4j with server side LESS support.

Answer 2

It would be simpler (and more effective) to first compile your less files to css files, during the build of your webapp.
As an example, when using Maven, we use the lesscss-maven-plugin (compile goal, process-sources phase) to generate css files from less files. Then only the css files are used and packaged in the webapp. No less files are used dynamically.
Another advantage is that less files are compiled before the webapp is deployed, so compilation errors are detected sooner.

Configuration example in pom.xml :

<plugin>
    <groupId>org.lesscss</groupId>
    <artifactId>lesscss-maven-plugin</artifactId>
    <version>1.3.0</version>
    <configuration>
        <sourceDirectory>${project.basedir}/src/main/webapp/less</sourceDirectory>
        <outputDirectory>${project.build.directory}/${project.build.finalName}/css</outputDirectory>
        <compress>true</compress>
        <includes>
            <include>main.less</include>
        </includes>
    </configuration>
    <executions>
        <execution>
            <goals>
                <goal>compile</goal>
            </goals>
        </execution>
    </executions>
</plugin>

Answer 3

What we do is we have two modes : dev and production.

For dev, use the official less css js compiler, which compiles on the fly:

<link type="text/css" rel="stylesheet/less" href="${...}/style.less" />
<script>(window.less = window.less || {}).env = 'development';</script>
<script src="${staticContext}/lib/less-1.3.3.js"></script>

in your HTML

for prod, use the compiled styles by https://github.com/marceloverdijk/lesscss-maven-plugin

<link type="text/css" rel="stylesheet" href="${staticContext}/css/style.css" />