Friday, 27 July 2012

How to Process LessCss .less Files into .css Files in a Maven Build Process?

Sample Maven LessCss Project
Thanks to Marcel Overdijk's plugin, it is now possible to process .less LessCss files into .css file during the maven build process.

Let's consider a maven web project, one can create a /css and a /less directory. The latter contains the source .less files, and the former will contain the processed .css files.

One should add the following plugin and dependency in pom.xml:
  <dependency>
    <groupId>org.lesscss</groupId>
    <artifactId>
      lesscss-maven-plugin
    </artifactId>
    <version>1.3.0</version>
  </dependency>

  <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.basedir}/src/main/webapp/css
      </outputDirectory>
      <compress>false</compress>
      <includes>
        <include>example.less</include>
      </includes>
      </configuration>
    <executions>
      <execution>
        <goals>
          <goal>compile</goal>
        </goals>
      </execution>
    </executions>
  </plugin>

This configuration will convert the example.less file into a example.css file during the maven build process. Any existing .css file is overwritten at each build process.

A Maven project sample is available from Git.