title: gatsby HTML file size too large (i.e. due to bootstrap-CSS)
body: <h2>Problem</h2>
  <p>When I build my gatsby website with &quot;gatsby build&quot;, the size of the generated HTML and CSS <strong>files is fairly large</strong> (approx. 200kB; even though there is close to zero real text-content in it).</p>
  <p>When looking into the generated HTML-file, it turns out, that in <strong>each and every</strong> generated HTML-file, the complete global CSS is (in text-form) included. So it is completly redundant.</p>
  <p>In my case: I use <strong>bootstrap</strong> as frontend framework, so all the bootstrap-css-classes (used and unused ones) are</p>
  <ol>
  <li>100% included in the generated HTML-files</li>
  <li>AND additionally: in the seperate  &quot;styles.ac6d....css&quot; file.</li>
  </ol>
  <p>To clarify: What I get after the gatsby built:</p>
  <pre><code>index.html    210 kB
  about.html    210 kB
  imprint.html  210 kB
  ....
  style.css     200 kB
  </code></pre>
  <h2>Expected Behaviour</h2>
  <p>What I would have expected after the gatsby built:</p>
  <pre><code>index.html     10 kB
  about.html     10 kB
  imprint.html   10 kB
  ....
  style.css     200 kB
  </code></pre>
  <p>I would like to have small HTML-files without any unused CSS in it <strong>OR</strong> at least not to have the CSS redundently in 20 different files.</p>
  <h2>Questions</h2>
  <ol>
  <li>Is it possible to get gatsby built HTML-files without all CSS redundently included in every file?</li>
  <li>AND / OR: Is it possible to have only the needed CSS-classes in the file (especially in the case of <strong>bootstrap</strong>)?</li>
  <li>Am I doing something wrong here?</li>
  </ol>
  <h2>Additional Infos</h2>
  <p><strong>How do I import the bootstrap CSS?</strong></p>
  <p>in global.scss:</p>
  <pre><code>@import &quot;./node_modules/bootstrap/scss/bootstrap
  </code></pre>
  <p>in gatsby-browser.js</p>
  <pre><code>import &quot;./src/styles/global.scss&quot;
  </code></pre>
  <p><strong>How does the compiled HTML look like?</strong></p>
  <p>The compiled HTML in index.html (and about.html, ...) from gatsby looks like so:</p>
  <pre><code>&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charSet=&quot;utf-8&quot;/&gt;&lt;meta http-equiv=&quot;x-ua-compatible&quot; content=&quot;ie=edge&quot;/&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, shrink-to-fit=no&quot;/&gt;&lt;style data-href=&quot;/styles.ac6d966df9cf852917cd.css&quot; id=&quot;gatsby-global-css&quot;&gt;/*!
   * Bootstrap v4.6.0 (https://getbootstrap.com/)
   * Copyright 2011-2021 The Bootstrap Authors
   * Copyright 2011-2021 Twitter, Inc.
   * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
   */:root{--blue:#007bff;--indigo:#6610f2;--purple:#6f42c1;--pink:#e83e8c;--red:#dc3545;--orange:#fd7e14;--yellow:#ffc107;
   
   &lt;!-- .... [ALL THE REST OF BOOTSTRAP CSS] --&gt;
  
  </code></pre>
  <hr />
  <h2>Edit: Conclusion for me</h2>
  <p>To inject the full global CSS in all the HTML files seems to be a normal behavior from the gatsby build process according to the comments. So just in case anybody else wonders about this gatsby behaviour...</p>