2

This is how I import style.css:

<link rel="stylesheet" type="text/css" href="/css/style.css?modified=1507947241"/>

At the top of style.scss I have some non-Bootstrap code and the following:

@import "../node_modules/bootstrap/scss/bootstrap.scss";

I use node-sass with --output compressed. It compresses bootstrap and my custom CSS just fine. However, I simply cannot overwrite any bootstrap variable successfully. I want to change the primary blue to a darker blue:

$theme-colors: (
  primary: #003366,
)

And no variation of this declaration will do it. I've tried importing a custom _variables.scss, I've tried to declare anything before, after, in the middle of other lines. I've tried !important and everything I could find on Stack Overflow. :}

Vael Victus
  • 3,966
  • 7
  • 34
  • 55

1 Answers1

2

Bootstrap 4 Beta 2 resolved this issue. Read more here. Simply upgrade and start customizing as you would expect to.

We’ve improved the ability to customize Sass maps. With Beta 1, we didn’t have a setup in place to modify your $theme-colors map without replacing it wholesale. That’s been fixed in Beta 2—override existing values and add more as needed.

Vael Victus
  • 3,966
  • 7
  • 34
  • 55