Compile Less to CSS using MVN

Prerequisites

  • Must have a project that is using MVN.

Steps

To do this we are going to be using the lesscss-maven-plugin

So first open up the pom.xml file

Add the following code snippet in under <plugins> </plugins>

 

<plugin>
    <groupId>org.lesscss</groupId>
    <artifactId>lesscss-maven-plugin</artifactId>
    <version>1.7.0.1.1</version>
    <configuration>
        <sourceDirectory>#{LOCATION_TO_LESS_DIRECTORY}</sourceDirectory>
        <outputDirectory>#{LOCATION_TO_TARGET_CSS_DIRECTORY}</outputDirectory>
        <includes>
            <include>#{SPECIFIC_FILES_TO_INCLUDE}</include>
        </includes>
    </configuration>
    <executions>
        <execution>
            <goals>
                <goal>compile</goal>
            </goals>
        </execution>
    </executions>
</plugin>

replace the following variables with their correct values:

  • LOCATION_TO_LESS_DIRECTORY – Typically src/main/webapp/resources/less but this is where you will be hosting your less files you wish to be compiled to CSS.
  • LOCATION_TO_TARGET_CSS_DIRECTORY – The output directory for the CSS files. Typically src/main/webapp/resources/css. NOTE: Their names will be the same as the less files names just with the extention .css instead of .less
  • SPECIFIC_FILES_TO_INCLUDE – If you wish to compile only specific less files then list their path here

And thats all there is to it. Simple run

mvn clean package

and your css files will be generated.

An additional useful feature the lesscss-maven-plugin has is the ability to “watch” your less files. By running

mvn lesscss:compile -Dlesscss.watch=true

in the directory of your pom file it will “watch” your less files so that when you change one of them. The CSS file is automagicly recompiled.

 

Advertisements