title: How to customize Bootstrap variables in a React app?
body: <p>I'm using facebook's <a href="https://github.com/facebookincubator/create-react-app" rel="noreferrer">create-react-app</a>. 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:</p>
  
  <p><strong>package.json</strong></p>
  
  <pre><code>"bootstrap": "^4.0.0-beta",
  </code></pre>
  
  <p>In my React layout container:</p>
  
  <pre><code>import 'bootstrap/dist/css/bootstrap.css';
  import '../styles/custom_bootstrap.scss';
  </code></pre>
  
  <p>Bootstrap is working fine but the customizations/overrides are not having an effect.</p>
  
  <p><strong>custom_bootstrap.scss:</strong></p>
  
  <pre><code>$theme-colors: (
    primary: orange
  ) !default;
  </code></pre>
  
  <p>The primary is still blue. What am I doing wrong here?</p>
  
  <h2>Updated</h2>
  
  <p><strong>MainLayout.jsx</strong></p>
  
  <pre><code>import '../styles/index.css'
  </code></pre>
  
  <p><strong>index.scss</strong></p>
  
  <pre><code>@import 'custom_bootstrap';
  @import 'bootstrap/scss/bootstrap';
  </code></pre>
  
  <p>If I remove <code>@import 'custom_bootstrap';</code> bootstrap compiles successfully. </p>
  
  <p>If I add it back and update the following:</p>
  
  <p><strong>_custom_bootstrap.scss</strong></p>
  
  <pre><code>$theme-colors: (
    primary: orange
  ) !default;
  </code></pre>
  
  <p>I'm getting compile errors like so:</p>
  
  <pre><code>09:44:56 web.1  | =&gt; 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&gt;&gt;   background-color: rgba($form-feedback-invalid-color,.8);\n   --------------------^\n"
  09:44:56 web.1  | }
  </code></pre>