title: Bootstrap Custom Variable Rails SASS
body: <p>In the <strong>stylesheets/bootstrap</strong> directory I have: </p>
  
  <p><strong>_variables.scss</strong> I have: </p>
  
  <pre><code>$black:                 #000 !default;
  $grayDark:              #333 !default;
  ...
  $textColor:             $grayDark !default;
  </code></pre>
  
  <p>This file is imported in the <strong>bootstrap.scss</strong> file:</p>
  
  <pre><code>// Core variables and mixins
  @import "bootstrap/variables"; // Modify this for custom colors, font-sizes, etc
  @import "bootstrap/mixins";
  ...
  </code></pre>
  
  <p>In the <strong>stylesheets</strong> directory I have <strong>bootstrap_include.scss</strong></p>
  
  <pre><code>@import "bootstrap/bootstrap";
  @import "bootstrap/responsive";
  </code></pre>
  
  <p>I want to override the default text to be black, so I create a custom variables file and imported it in my custom bootstrap file </p>
  
  <p><strong>_variables_custom.scss:</strong> </p>
  
  <pre><code>$black:                 #000 !default;
  $textColor:             $black !default;
  </code></pre>
  
  <p>and then in <strong>bootstrap_custom.scss</strong></p>
  
  <pre><code>@import "variables_custom"; 
  </code></pre>
  
  <p>Finally in the <strong>application.css.scss</strong></p>
  
  <pre><code>*= require bootstrap_custom
  *= require bootstrap_include
  </code></pre>
  
  <p>When I refresh the page, bootstrap_custom is always empty, I'm a css newbie, and why it isn't working? </p>
  
  <p>Thanks</p>
  
  <p>NOT SURE IF THIS IS NICE BUT I SOLVED IT USING: </p>
  
  <p>my <strong>bootstrap_custom</strong> now includes </p>
  
  <pre><code>$black:                 #000 !default;
  $textColor:             $black !default;
  @import "bootstrap/bootstrap";
  @import "bootstrap/responsive";
  </code></pre>
  
  <p>and my <strong>application.css.scss</strong> now only includes </p>
  
  <pre><code>*= require bootstrap_custom
  </code></pre>