Integrating Twitter Bootstrap with Play 2.0 using Scala

Table of contents

Reading Time: < 1 minute

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.

def customLessEntryPoints(base: File): PathFinder = (
    (base / "app" / "assets" / "stylesheets" / "bootstrap" * "bootstrap.less") +++
    (base / "app" / "assets" / "stylesheets" * "*.less"))

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

 val main = PlayProject(appName, appVersion, appDependencies, mainLang = SCALA).settings(
    lessEntryPoints <<= baseDirectory(customLessEntryPoints))

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

 <link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/bootstrap/bootstrap.min.css")" />

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 Scala1 min read”

Don’t you mean “customLessEntryPoints(baseDirectory)” instead of “baseDirectory(customLessEntryPoints)”?

Okay, that’s clearly wrong. Please delete previou comment.

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)
)

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)
)

Comments are closed.