title: Bootstrap LESS: duplicate @imports
body: <p>We are using bootstrap v3.3.4.</p>
  
  <p>Our structure keeps all of bootstrap's LESS source files in a separate folder for easy upgrading.</p>
  
  <p>In our main <code>styles.less</code> file that compiles to <code>styles.css</code> we just <code>@import</code> all of the dependencies, including <code>bootstrap.less</code>. </p>
  
  <pre><code>@import "bootstrap/bootstrap.less"; // bootstrap source
  @import "variables.less"; // our custom variables
  @import "mixins.less"; // our custom mixins
  @import "main.less"; // all of our custom css/less styles
  </code></pre>
  
  <p>Our custom <code>variables.less</code> file imports bootstrap's <code>variables.less</code> file, and our custom <code>mixins.less</code> file imports bootstrap's <code>mixins.less</code> file.</p>
  
  <p>This means that in our main <code>styles.less</code>, bootstrap's <code>variables.less</code> and <code>mixins.less</code> are imported twice. (once in <code>bootstrap/bootstrap.less</code> and again in our custom <code>mixins.less</code>/<code>variables.less</code>)</p>
  
  <p>The reason we are doing it this way is because we have other separate <code>css</code> files that we only include on some pages along with styles.css, and those files are compiled from their own <code>less</code> files that depend on both bootstrap's custom variables/mixins and our custom variables/mixins, which means they need to be imported in these less files.</p>
  
  <p>Therefore, it's much easier to just do this:</p>
  
  <pre><code>@import "variables.less"; // our custom variables that also @import bootstrap's variables
  @import "mixins.less"; // our custom variables that also @import bootstrap's variables
  </code></pre>
  
  <p>and not have to worry about importing all of the dependencies (bootstrap's and ours) separately since our version imports the bootstrap version.</p>
  
  <p>If we tried to eliminate the duplicate imports, it would look like:</p>
  
  <pre><code>@import "bootstrap/variables.less";
  @import "bootstrap/mixins.less";
  @import "variables.less";
  @import "mixins.less";
  </code></pre>
  
  <p>We would not only have to import twice as many files, but we would also have to worry about the order because the bootstrap files must come first.</p>
  
  <p>My question is A) Will doing it our way cause problems because of duplicate imports, B) Even if it won't necessarily cause problems, does this violate any best practices, and C) Is there a better way to approach this?</p>