Unable to override $theme-color in bootstrap 4

Update 2018 for Bootstrap 4.1

To change the primary, or any of the theme colors in Bootstrap 4 SASS, set the appropriate variables before importing bootstrap.scss. This allows your custom scss to override the default value, and will then be set in all the theme-colors loops (btn-primary, bg-primary, text-primary, etc..)...

/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";

$theme-colors: (
  primary: #333333;
);

/* finally, import Bootstrap */
@import "bootstrap";

Demo: https://www.codeply.com/go/lobGxGgfZE

---

Also see this answer

This got me too. You need to import functions.scss into your scss file before variables.

@import '../../node_modules/bootstrap/scss/functions';
@import 'assets/styles/variables';
@import '../../node_modules/bootstrap/scss/bootstrap';

Your paths may differ.

This is with Bootstrap 4 Beta 1.

None of the solutions provided work. Some are close and will update the color use on most elements, but not all elements. I have tried them all (and every other alternative I can find on StackOverflow and other websites, but those solutions only affect the elements that are specifically referencing the color property and does not update those using the theme-color function to get the color.

The expected solution (and recommended by others) is

/* import only the necessary Bootstrap files */
@import "../../node_modules/bootstrap/scss/functions";
@import "../../node_modules/bootstrap/scss/variables";

/* -------begin customization-------- */
$colors: (
  "" + blue: #004C9E
);

/* 80 required to bring primary and secondary colors to AAA standards */
$theme-colors: (
  primary: #004C9E
);

// /* -------end customization-------- */

/* finally, import Bootstrap to set the changes! */
@import "../../node_modules/bootstrap/scss/bootstrap";

But this leaves 15 occurences of #007bff (the normal blue/primary color) throughout the generated custom.css. Examples of it occur in the pagination section, e.g.

.page-item.active .page-link {
  z-index: 1;
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

By setting both the $colors and the $theme-colors custom properties after the import of the functions.scss, and placing the statement to import the variables.scss AFTER these changes appears to set the new colors throughout. I presume that by setting these variables specifically, the bootstrap variables cannot override them.

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

/* -------begin customization-------- */
$colors: (
  "" + blue: #004C9E
);

/* 80 required to bring primary color to AAA standards */
$theme-colors: (
  primary: #004C9E
);

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

/* put other customization in here */

// /* -------end customization-------- */

/* finally, import Bootstrap to set the changes! */
@import "../../node_modules/bootstrap/scss/bootstrap";

The may not seem right, but it does appear to work. I'm not a SASS expert, so maybe someone else could explain this better. I hope this helps anyone who may still be struggling to solve this issue.