title: Customize bootstrap 4 variables using it's own variables?
body: <p>I am using latest Bootstrap 4 beta 2. I am trying to customize it. Mean change variables with my own.</p>
  
  <p>I have my own <code>styles.scss</code> with all bootstrap imports:</p>
  
  <pre><code>// My variables
  @import 'helpers/variables';
  
  // Bootstrap files
  @import 'node_modules/bootstrap/scss/functions';
  @import 'node_modules/bootstrap/scss/variables';
  @import 'node_modules/bootstrap/scss/mixins';
  @import 'node_modules/bootstrap/scss/root';
  @import 'node_modules/bootstrap/scss/print';
  @import 'node_modules/bootstrap/scss/reboot';
  // ... all others
  </code></pre>
  
  <p>Official documentation provides an <a href="https://getbootstrap.com/docs/4.0/getting-started/theming/" rel="nofollow noreferrer">example</a>, how bootstrap can be customized (themed). But there is only simple example with HEX colors.</p>
  
  <p>But what if I want to override variables in bootstrap <code>_variables.scss</code> and use variables from this file at the same time? For example I want to make my <code>$primary</code> black. They already have this variable inside <code>_variables.scss</code>, but I didn't found an idea how to use it. I've tried like this:</p>
  
  <pre><code>// source: helpers/variables
  @import 'node_modules/bootstrap/scss/functions';
  @import 'node_modules/bootstrap/scss/variables';
  
  $primary: $indigo;
  </code></pre>
  
  <p>But in this case blue color is used. If I remove these imports from <code>helpers/variables</code> and replace color with HEX - all works fine.</p>
  
  <p>I think that there is no way to do this, because SASS will not allow this, but decided to ask community.</p>