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:
- 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.
- Put Bootstrap’s JavaScript files and fonts into the according folders under /src/main/webapp—excluding the stylesheet bootstrap.css.
- Download the current less-compiler less-1.x.x.min.js [3] and save it to /src/main/less.
- 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).
- 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";
- 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:
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.