software development

Compiling Twitter Bootstrap using Maven in Eclipse

When using Eclipse, Maven and Twitter Bootstrap in a web project it’s easy to compile Bootstrap on your own—using Eclipse and Maven. Therefore you can utilize the lesscss-maven-plugin [1].

Assuming a typical maven web project, you have to:

  1. Download the Bootstrap sources and put the *.less-files into /src/main/less/bootstrap. Note that this doesn’t align with the standard directory structure of Maven [2] but avoids a bunch of additional configuration in your pom.xml.
  2. Put Bootstrap’s JavaScript files and fonts into the according folders under /src/main/webapp—excluding the stylesheet bootstrap.css.
  3. Download the current less-compiler less-1.x.x.min.js [3] and save it to /src/main/less.
  4. Create a new folder “user” in /src/main/less. That’s the place to put addition stylesheets and/or less-files that need to be included into the compiled css file (your corporate design or whatever).
  5. Create a file “bootstrap-custom.less” in /src/main/less. This one will be the entry point for the less compiler. Having a user.less inside /src/main/less/user the content of bootstrap-custom.less would be:
    @import "bootstrap/bootstrap.less";	
    @import "user/user.less";
    
  6. Add to your project’s pom.xml:
    <plugin>
        	<groupId>org.lesscss</groupId>
        	<artifactId>lesscss-maven-plugin</artifactId>
       	<version>1.3.3</version>
        	<configuration>
        		<sourceDirectory>${project.basedir}/src/main/less</sourceDirectory>
    		<outputDirectory>${project.basedir}/src/main/webapp/css</outputDirectory>
    		<compress>true</compress>
    		<includes>
    			<include>bootstrap-custom.min.less</include>
    		</includes>
    		<lessJs>${project.basedir}/src/main/less/less-1.6.2.min.js</lessJs>
        	</configuration>
        	<executions>
           		<execution>
                		<goals>
                   			<goal>compile</goal>
                		</goals>
            	</execution>
        	</executions>
    </plugin>
    

Following these steps the layout of your project should look like this:

The directory structure in Eclipse.

Directory Structure in Eclipse

Now the lesscss-maven-plugin will be called every time you’re saving a change in your less or css sources inside Eclipse (assuming you have m2e installed and your project is configured as a Maven project). The compiled css file will be written to /src/main/webapp/css, overwriting an already existing one. If you’re running Maven from the command line (eg. on your build server) the css will also be compiled and placed inside /src/main/webapp/css.

Rolf Engelhard

 

Leave a Reply

Required fields are marked *.