title: Cannot load CSS file from index.html
body: <p>I understand that is was a frequently asked question. I looked at many other topics on stack overflow about it and I still don't know what the issue is? Some are saying it's because it's reading the file type as a <code>text/html MIME</code> type however I declared in my index.html it as <code>text/css</code> and it's still throwing me an error in the console.</p>
  
  <p>And when i change it to text/html in my index file, the error in the console goes away but my styles won't load at all on my page even though the path is correct?</p>
  
  <p>Error i get in console: <code>localhost/:1 Refused to apply style from 'http://localhost:1234/assets/css/styles.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.</code></p>
  
  <p>I've been stuck trying to figure this out for past 2 hours I think it's something small I'm missing. </p>
  
  <p>Here is my project structure:</p>
  
  <p><strong>INDEX.HTML</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
      &lt;meta name="theme-color" content="#000000"&gt;
      &lt;link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"&gt;
      &lt;link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="../assets/css/styles.css"&gt;
      &lt;title&gt;Portfolio Application&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="app"&gt;&lt;/div&gt;
      &lt;!-- Bootstrap JS Library --&gt;
      &lt;script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" type="text/javascript" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" type="text/javascript" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" type="text/javascript" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="bundle.js"&gt;&lt;/script&gt;&lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Webpack.config file</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  
  module.exports = {
      entry: __dirname + "/src/index.js",
      output: {
          path: __dirname + "/public",
          filename: 'bundle.js',
      },
      module: {
          rules: [
              {
                  test: /\.jsx?$/,
                  exclude: /node_modules/,
                  use: {
                      loader: 'babel-loader',
                      query: {
                          presets: ['env', 'react', 'stage-0']
                      }
                  }
              }
          ]
      },
      plugins: [
          new HtmlWebpackPlugin({
              template: './public/index.html'
          })
      ]
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Server file (Main.js)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const express = require('express');
  const bodyParser = require('body-parser');
  const path = require('path');
  const cors = require('cors');
  
  const app = express();
  const port = 8010;
  
  app.use(bodyParser.urlencoded({extended:false}));
  app.use(bodyParser.json());
  
  app.use(cors());
  app.use(function(req, res, next){
      res.setHeader('Access-Control-Allow-Origin', '*');
      res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
      res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type, Authorization');
      next();
  });
  
  app.use('/', express.static(__dirname + "/../public"));
  
  app.listen(port, () =&gt; {
      console.log(`app is listening in on port ${port}`);
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>Folder structure:</p>
  
  <ul>
        <li>root</li>
        <li>public (folder)</li>
        <ul>
          <li>assets</li>
          <li>fonts</li>
          <li>images</li>
          <li>bundle.js</li>
          <li>index.html</li>
        </ul>
        <li>server (folder)</li>
        <ul>
          <li>main.js</li>
        </ul>
        <li>src (folder)</li>
        <ul>
          <li>common (folder)</li>
          <li>components (folder)</li>
          <li>index.js</li>
          <li>routes.js</li>
        </ul>
        <li>package.json</li>
        <li>webpack.config.js</li>
  </ul>