title: How to optimise bootstrap to avoid rendering unused css code
body: <p>We are working on an MVP in vue.js and we decided to use bootstrap to have the element styled in a consistent way. </p>
  
  <p>Now we are starting to add the skin/theme to our single-page app, and we found an issue with the css rendered on the page. </p>
  
  <p>We successfully managed to override the styles by using higher specificity css selectors, but we would like to optimise the output code rendered in the browser by removing the unused "base" bootstrap css code.</p>
  
  <p>The question:   </p>
  
  <h2>How can we setup our environment to make the bootstrap sass code to output clean and non-redundant css code?</h2>
  
  <p>Details:</p>
  
  <ol>
  <li>Bootstrap loads its own <code>_buttons.scss</code> file</li>
  <li>We are loading our own "theme" <code>_buttons.scss</code> file after bootstrap's one and we managed to have our css with higher specificity.</li>
  <li>We run the sass code compiler (on node-sass)</li>
  <li>The output css contains <strong>BOTH</strong> the bootstrap style and our own themed style for the buttons.
  (As an example, see the following screenshot)
  <a href="https://i.stack.imgur.com/CjhOr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CjhOr.png" alt="enter image description here"></a></li>
  </ol>
  
  <p>As you can see our own button style is applied as intended but we still carry over the bootstrap original style. </p>
  
  <hr>
  
  <p><strong>We would like to have OUR STYLE ONLY rendered in the browser.</strong></p>
  
  <hr>
  
  <p><strong>Update:</strong></p>
  
  <p>The UI I'm working on uses some classes straight from bootstrap, and obviously some classes specific of our own app.</p>
  
  <p>Sometimes these classes are necessary to override the bootstrap default styles.<br>
  We need to override not only the colours (which are customisable through the <code>_variables.scss</code>), but also some other css attributes.   </p>
  
  <p>We find ourselves struggling with duplicated css code rendered in the browser, where there is our own style applied and also the default bootstrap generated style which will never be applied as it's low in specificity.</p>
  
  <p><em>I wonder if there is a way to avoid to compile sass code that doesn't need to be rendered in the browser, and at the same time avoid to "touch" the bootstrap code in <code>./node_modules/</code>.</em></p>