title: CSS not loading in localhost
body: <p>It was working previously but I can't pinpoint where the source of the problem is.</p>
  
  <p>I'm importing my <code>styles.css</code> folder with index.js. I swapped some JS code around, the problem happened, and after getting nowhere I reverted my code back to the way it was. But for some reason the problem still persists.</p>
  
  <p>I wondered if some of my dependencies were conflicting with another, but now that I've disabled most of them I don't think they're related to the CSS not working. I've also scanned over <code>styles.css</code> and as far as I can tell there aren't any missing braces or errors.</p>
  
  <p>When I compile my code via webpack and upload it to SharePoint the CSS does load, so there's something off about what I'm working with locally.</p>
  
  <p>Any thoughts? I can't proceed with my project unless I can get the CSS back. Here's a <a href="https://i.stack.imgur.com/SD8lz.png" rel="nofollow noreferrer">screenshot</a> of my browser and here's a <a href="https://jsfiddle.net/vgupz0Le/" rel="nofollow noreferrer">JSFiddle</a> of my <code>webpack.config.js</code>.</p>
  
  <h3>index.html:</h3>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="eng"&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
    &lt;head&gt;
      &lt;title&gt;Training Library&lt;/title&gt;
  
    &lt;!-- &lt;link type="text/css" rel="stylesheet" href="./styles.css"&gt; --&gt;&lt;!-- due to ./styles.css being imported via index.js I'm not sure if this line is needed --&gt;
    &lt;/head&gt;
    &lt;body&gt;
  </code></pre>
  
  <h3>index.js</h3>
  
  <pre><code>import "./styles.css";
  // import 'bootstrap/dist/css/bootstrap.min.css';
  // import 'jquery-autocomplete/jquery.autocomplete.css';
  // import './SiteAssets/plugins/jquery-ui.min.css';
  
  import 'jquery';
  
  // import 'bootstrap/dist/js/bootstrap.bundle.min.js';
  // import 'jquery-ui-bundle/jquery-ui.min.js';
  // import './SiteAssets/plugins/jquery.autocomplete.js';
  
  // import './SiteAssets/plugins/moment.min.js';
  
  import TopCoursesComponent from './SiteAssets/scripts/topCourses';
  import NewCoursesComponent from './SiteAssets/scripts/newCourses';
  import AllCoursesComponent from './SiteAssets/scripts/allCourses';
  </code></pre>
  
  <h3>File structure:</h3>
  
  <pre><code>+ TrainingLib
   + dist
   + node_modules
   + public
    - index.html
   + src
    + SiteAssets
     + plugins
     + scripts
      - allCourses.js
      - newCourses.js
      - etc
    - index.js
    - styles.css
   - package.json
   - webpack.config.js
  </code></pre>