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:

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 *.