Importing bootstrap themes and overriding bootstrap css styles

[jbweeks]

First of all, thanks for the fantastic contribution!

Anyway, I have been reading both your great doc and intro, as well as the doc here:

https://japgolly.github.io/scalacss/book/quickstart/index.html

However, it isn't clear how to "insert" a bootstrap theme file, or override styles for default bootstrap components (like the nav bar).

If I have a file (e.g. "fooBootStrapTheme.css"), how can I inject that, and then, further, override values it provides?

For example, if I want to change the color of the Nav bar, e.g.:

http://work.smarchal.com/twbscolor/

I can clearly go into GlobalStyles.scala and add my own components with their own styles, e.g.:

  val myNavbar = style(
    addClassName("nav navbar-nav navbar-border"),
    backgroundColor(c"#5432AB")
  )

...but I'd rather pull all this from a main CSS file, and then override the styles surgically as needed. Also, I'd rather not have to specify custom components, but rather have the styles apply to the standard bootstrap components (cascading style sheets, FTW) :)

I apologize in advance if I am completely missing something here...

Thanks!

[ochrons]

You need to load the CSS files in correct order, first the Bootstrap base CSS, then any theming to override the defaults. If you are using LESS (like the tutorial is), just add @import statements into the main.less file.