Integrating Twitter Bootstrap with Play 2.0 using Scala

We spent more than a few hours in getting the boostrapping right for Play 2.0 RC3 and twitter bootstrap. Following is a summary of steps we followed and some pitfalls that we encountered.

For starters, you can start by having a look to the sample play application for a todo list.

Here we are going to discuss about the twitter bootstrap integration using ‘Build.scala‘ file.

1. Create a folder say ‘assets/stylesheets/bootstrap‘ under you app folder and copy all the bootstrap’s less file in to this.

2. Modify the ‘project/Build.scala‘ file for filtering out the Bootstrap LESS files we don’t want to compile.

The above mentioned code is the resolver function for setting the build path. This will result into the compilation of the “stylesheets/bootstrap/bootstrap.less” and all the ‘*.less’ files under the “stylesheets/bootstrap/”.

3. Override the default lessEntryPoints with the new function as

4. Now Include the ‘bootstrap.min.css‘ file in your view(s):

5. Now run your project and hit the localhost:9000, you will find your ‘bootstrap.css‘ file within your target directory.

Note :- One thing you must have to look is that you will find your ‘bootstrap.css‘ file after running the project and hitting your localhost.

Find More..

4 thoughts on “Integrating Twitter Bootstrap with Play 2.0 using Scala

  1. I’m using Play2 v 2.1.1, and it looks like this is how you need Build.scala:

    val main = play.Project(appName, appVersion, appDependencies).settings(
    lessEntryPoints <<= baseDirectory(customLessEntryPoints)
    )

  2. for Play 2.1.1, i think this this the updated Build.scala (i got a warning using the code above)
    val main = play.Project(appName, appVersion, appDependencies).settings(
    lessEntryPoints <<= baseDirectory(customLessEntryPoints)
    )

Leave a Reply

%d bloggers like this: