title: Using bootstrap in multiple SASS files causes class override issues. What's a proper SASS/bootstrap structure?
body: <p>I searched for a while, but couldn't find any similar issue to my very surprise.</p>
  <p>I am using <strong>SASS and Bootstrap</strong> for a Drupal installation.
  I have a simple file structure:</p>
  <ul>
  <li><em>base.scss</em> - Provides Bootstrap and variable imports.</li>
  <li><em>style.scss</em> - Imports the project's modules:</li>
  </ul>
  <p><strong>style.scss</strong></p>
  <pre><code>@import &quot;base&quot;; 
  @import &quot;util&quot;;
  
  @import &quot;node&quot;;
  @import &quot;project&quot;;
  @import &quot;breadcrumb&quot;;
  @import &quot;menu&quot;;
  </code></pre>
  <p>So of course, all these <code>[above].scss</code> are existent and located in the same folder.</p>
  <p><strong>My goal</strong></p>
  <ul>
  <li>I want to use bootstrap in all separate files: node, project, breadcrumb and menu, but only include bootstrap once.</li>
  </ul>
  <p><strong>The problem</strong></p>
  <ol>
  <li>If I want to <code>@extend .breadcrumb;</code> in one of the specified files <em>without <code>import &quot;base&quot;;</code></em>, the selector .breadcrumb can't be found.</li>
  <li>If I <code>import &quot;base&quot;;</code> in these <em>n</em> separate files, bootstrap selectors are included <em>n</em> times. This leads to incredible clutter, and makes overrides to bootstrap selectors complicated. For example, I want to change bootstrap's <code>.navbar-toggle</code>. If I'd do this in <code>node.scss</code>, it will be overridden by the then-imported <em>default</em> bootstrap selector in <code>project.scss</code>.</li>
  </ol>
  <ul>
  <li>Is there a proper way to include bootstrap only once and use it in
  several other files?</li>
  <li>I don't really understand why problem #1 exists whatsoever. SASS doc says:</li>
  </ul>
  <blockquote>
  <p>Sass will take the file that you want to import and combine it with the file you're importing into so you can serve a single CSS file to the web browser.</p>
  </blockquote>
  <ul>
  <li>So if I use the above-mentioned <code>style.scss</code> that imports bootstrap and <em>don't</em> import bootstrap in the modules, why is the compiler failing to resolve any bootstrap class? That doesn't really sound like <em>combining</em> imports, to me. Or am I missing some of the very basics?</li>
  </ul>
  <p><strong>base.scss</strong>:</p>
  <pre><code>/*!
   * Bootstrap v3.3.7 (http://getbootstrap.com)
   * Copyright 2011-2016 Twitter, Inc.
   * Licensed under MIT (https://github.com/twbs/../../bootstrap/stylesheets/bootstrap/blob/master/LICENSE)
   */
  
  // Core variables and mixins
  
  @import &quot;variables&quot;;
  @import &quot;../../bootstrap/stylesheets/bootstrap/mixins&quot;;
  
  // Reset and dependencies
  @import &quot;../../bootstrap/stylesheets/bootstrap/normalize&quot;;
  @import &quot;../../bootstrap/stylesheets/bootstrap/print&quot;;
  @import &quot;../../bootstrap/stylesheets/bootstrap/glyphicons&quot;;
  
  // Core CSS
  @import &quot;../../bootstrap/stylesheets/bootstrap/scaffolding&quot;;
  @import &quot;../../bootstrap/stylesheets/bootstrap/type&quot;;
  @import &quot;../../bootstrap/stylesheets/bootstrap/code&quot;;
  @import &quot;../../bootstrap/stylesheets/bootstrap/grid&quot;;
  @import &quot;../../bootstrap/stylesheets/bootstrap/tables&quot;;
  @import &quot;../../bootstrap/stylesheets/bootstrap/forms&quot;;
  @import &quot;../../bootstrap/stylesheets/bootstrap/buttons&quot;;
  
  // Components
  @import &quot;../../bootstrap/stylesheets/bootstrap/component-animations&quot;;
  @import &quot;../../bootstrap/stylesheets/bootstrap/dropdowns&quot;;
  @import &quot;../../bootstrap/stylesheets/bootstrap/button-groups&quot;;
  @import &quot;../../bootstrap/stylesheets/bootstrap/input-groups&quot;;
  @import &quot;../../bootstrap/stylesheets/bootstrap/navs&quot;;
  @import &quot;../../bootstrap/stylesheets/bootstrap/navbar&quot;;
  @import &quot;../../bootstrap/stylesheets/bootstrap/breadcrumbs&quot;;
  // [...] other components
  
  // Components w/ JavaScript
  @import &quot;../../bootstrap/stylesheets/bootstrap/modals&quot;;
  @import &quot;../../bootstrap/stylesheets/bootstrap/tooltip&quot;;
  // [...]
  
  // Utility classes
  @import &quot;../../bootstrap/stylesheets/bootstrap/utilities&quot;;
  @import &quot;../../bootstrap/stylesheets/bootstrap/responsive-utilities&quot;;
  </code></pre>