Using resources from WebJars
index.html. In the tutorial project this means following
configuration in the
This will produce a file named
For extracting CSS files from WebJars you could use the method described below, but there is bit more convenient method that gives you LESS
processing as a bonus. First we'll need to add the sbt-less plugin into our
addSbtPlugin("com.typesafe.sbt" % "sbt-less" % "1.0.6")
The server project automatically enables the
sbt-less plugins because it uses the
We'll be storing LESS files under
src/main/assets/stylesheets to keep them separated from directly copied resources.
LessKeys.compress in Assets := true,
This tells the LESS compiler to minify the produced CSS.
Next step is to create a
main.less (yes, it has to be named exactly that) with references to CSS/LESS files inside the WebJars.
@import "lib/bootstrap/less/bootstrap.less"; @import "lib/font-awesome/less/font-awesome.less";
In this case we just import Bootstrap and Font Awesome LESS files because all other CSS styles are defined using ScalaCSS. Depending on the WebJar,
it may or may not contain LESS files in addition to the CSS file. With the LESS files you can easily
configure the library to your liking by defining CSS variables in your
@import "lib/bootstrap/less/bootstrap.less"; @import "lib/font-awesome/less/font-awesome.less"; @brand-danger: #00534f;
WebJar resource files
Sometimes WebJars contain other useful resources, such as the font files for Font Awesome in our case. Just including the WebJar as a dependency will provide us the extracted contents and it can be used directly.