title: What files should I import, so I can make Bootstrap custom range thumbs work?
body: <p>I'm trying to use Bootstrap's custom form range, though its thumb is not working, even if I import <code>scss/_bootstrap.scss</code> manifest file. It works only when <code>dist/bootstrap.css</code> is imported or I'm using the CDN.</p>
  
  <p>That's my manifest file for importing Bootstrap files:</p>
  
  <pre><code>// Required abstracts
  @import "../../../node_modules/bootstrap/scss/functions";
  @import "../../../node_modules/bootstrap/scss/variables";
  @import "../../../node_modules/bootstrap/scss/mixins";
  
  /*----------------------------- OPTIONAL -----------------------------*/
  
  // abstract
  @import "../../../node_modules/bootstrap/scss/utilities/display";
  @import "../../../node_modules/bootstrap/scss/utilities/flex";
  
  // base
  @import "../../../node_modules/bootstrap/scss/reboot";
  @import "../../../node_modules/bootstrap/scss/type";
  @import "../../../node_modules/bootstrap/scss/code";
  
  // layout
  @import "../../../node_modules/bootstrap/scss/grid";
  
  //components
  @import "../../../node_modules/bootstrap/scss/card";
  @import "../../../node_modules/bootstrap/scss/forms";
  @import "../../../node_modules/bootstrap/scss/custom-forms";
  </code></pre>
  
  <p>And that's my HTML code:</p>
  
  <pre><code>&lt;input id='quantity' 
         class='custom-range' 
         type='range' 
         min='12' 
         max='18' 
         step='2'
         value='12'&gt;
  </code></pre>
  
  <p>After importing these files, the range thumb won't style as expected (it keeps browsers default style).</p>