I want to use and customize bootstrap 4 (currently in beta) in a play framework 2.6 application (scala).
By customizing I mean creating my own css classes or changing existing variables like container width, colors of default buttons, ...
How would I go about this? My assumption is that the proper way to do this would be to somehow integrate the sass compilation into my play framework application so that relevant changes to core bootstrap variables are picked up in all necessary places?
What I have done so far is:
In build.sbt, added "org.webjars" % "bootstrap" % "4.0.0-beta" to the libraryDependencies.
In plugins.sbt, added addSbtPlugin("org.irundaia.sbt" % "sbt-sassify" % "1.4.4")
In my app\assets\css\main.scss, added @import "lib/bootstrap/css/bootstrap";.
The bootstrap css is now correctly bundled with my custom css.
How do I now change bootstrap variables? In the customization documentation ( https://getbootstrap.com/docs/4.0/getting-started/options/#customizing-variables ) doc it says that there is a file called _variables.scss where this can be done. This file does not exist in /lib/bootstrap/css where the webjar content was extracted to.
Tested in bootstrap 4.3.1 ("org.webjars" % "bootstrap" % "4.3.1")
Regarding _variables.scss, it was located as /lib/bootstrap/scss/_variable.scss in my environment.
To customize, change the theme and import bootstrap as below
in your assets/stylesheets/main.scss or scss files that main.scss imports.
//change theme
$theme-colors: (
"primary": red,
);
// import booststrap
@import "lib/bootstrap/scss/bootstrap.scss";