[2.3] Customizing Bootstrap imported from WebJars?

[Ryan Tanner]

If I'm using Boostrap via WebJars, how can I override parts of it?  For instance, if I want to change some of the LESS variables?

Should I just download original LESS source files and skip Webjars for this?

[Matthias Kurz]

Hi Ryan,

you can do this with Webjars:

libraryDependencies ++= Seq(
    ...
    "org.webjars" % "bootstrap" % "3.3.4",
    ...
)

Webjars get extracted to target/web/web-modules/main/webjars/ within your project folder. E.g. you can find the Bootstrap *.less files inside the folder target/web/web-modules/main/webjars/lib/bootstrap/less/.

To use these *.less files you can e.g. create the file app/assets/stylesheets/bootstrap.less and use it like this:

@import "lib/bootstrap/less/variables.less";
// override bootstrap variables here e.g.
@font-family-sans-serif:  "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

// then import other boostrap files you need:
@import "lib/bootstrap/less/mixins.less";
// ...
// etc.

To make it easy, you could actually just copy target/web/web-modules/main/webjars/lib/bootstrap/less/bootstrap.less and just customize it.

You can then use this custom less/bootstrap file by including it in you view:

<link href="@routes.Assets.versioned("stylesheets/bootstrap.css")" rel="stylesheet" type="text/css" />

Also make sure you have the less plugin enabled in your project/plugins.sbt file to make sure the less file get compiled to css files:

addSbtPlugin("com.typesafe.sbt" % "sbt-less" % "1.0.6")

Also READ IT'S DOCUMENTATION because probably you have to set 

includeFilter in (Assets, LessKeys.less) := "*.less"

in your build.sbt file. See documentation why.

Hope this helps.

Regards,

Matthias