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.