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. :}
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.