How to customize Bootstrap variables in a React app? - node.js

Question

I'm using facebook's create-react-app. I've completed all the instructions to add SASS to my app, now I'm trying to add Bootstrap and customize the theme. I've been able to add bootstrap but the customizing of the variables is not working. Here is my setup:
package.json
"bootstrap": "^4.0.0-beta",
In my React layout container:
import 'bootstrap/dist/css/bootstrap.css';
import '../styles/custom_bootstrap.scss';
Bootstrap is working fine but the customizations/overrides are not having an effect.
custom_bootstrap.scss:
$theme-colors: (
primary: orange
) !default;
The primary is still blue. What am I doing wrong here?
Updated
MainLayout.jsx
import '../styles/index.css'
index.scss
#import 'custom_bootstrap';
#import 'bootstrap/scss/bootstrap';
If I remove #import 'custom_bootstrap'; bootstrap compiles successfully.
If I add it back and update the following:
_custom_bootstrap.scss
$theme-colors: (
primary: orange
) !default;
I'm getting compile errors like so:
09:44:56 web.1 | => changed: /Users/xxx/sites/xxx/client/src/styles/index.scss
09:44:56 web.1 | {
09:44:56 web.1 | "status": 1,
09:44:56 web.1 | "file": "/Users/xxx/sites/xxx/client/node_modules/bootstrap/scss/_forms.scss",
09:44:56 web.1 | "line": 280,
09:44:56 web.1 | "column": 21,
09:44:56 web.1 | "message": "argument `$color` of `rgba($color, $alpha)` must be a color\n\nBacktrace:\n\tnode_modules/bootstrap/scss/_forms.scss:280, in function `rgba`\n\tnode_modules/bootstrap/scss/_forms.scss:280",
09:44:56 web.1 | "formatted": "Error: argument `$color` of `rgba($color, $alpha)` must be a color\n\n Backtrace:\n \tnode_modules/bootstrap/scss/_forms.scss:280, in function `rgba`\n \tnode_modules/bootstrap/scss/_forms.scss:280\n on line 280 of node_modules/bootstrap/scss/_forms.scss\n>> background-color: rgba($form-feedback-invalid-color,.8);\n --------------------^\n"
09:44:56 web.1 | }

Answer 1

It looks like you're importing the compiled bootstrap CSS:
import 'bootstrap/dist/css/bootstrap.css';
Variables you set in your custom SCSS won't have any effect on this.
Import your variables, then bootstrap's SCSS. Omit the !default flag. Example:
styles/styles.scss
#import 'variables';
#import '[relative path to boostrap]/scss/bootstrap';
styles/_variables.scss
$theme-colors: (
primary: orange
);

Answer 2

You cannot change sass variables that are in the compiled .css bootstrap file. They are no longer sass variables at that point. You need to override them before they are compiled. So start by importing in bootstrap to your custom file and then override it. Then you can compile it all into one .css file.
import 'bootstrap/dist/css/bootstrap.scss';
$theme-colors: (
primary: orange
) !default;