Stylesheet not loaded because of MIME-type

Question

I'm working on a website that uses gulp to compile and browser sync to keep the browser synchronized with my changes.

The gulp task compiles everything properly, but on the website, I'm unable to see any style, and the console shows this error message:

Refused to apply style from 'http://localhost:3000/assets/styles/custom-style.css' because its MIME type ('text/HTML') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Now, I don't really understand why this happens.

The HTML includes the file like this (which I am pretty sure is correct):

<link rel="stylesheet" type="text/css" href="assets/styles/custom-style.css"/>

And the stylesheet is a merge between Bootstrap & font-awesome styles for now (nothing custom yet).

The path is correct as well, as this is the folder structure:

index.html

assets

|-styles

  |-custom-style.css

But I keep getting the error.

What could it be? Is this something (maybe a setting?) for gulp/browser-sync maybe?

Answer 1

I was working with the React.js app and also had this error which led me here. This is what helped me. Instead of adding <link> to the index.html, I added an import to the component where I need to use this stylesheet:

import 'path/to/stylesheet.css';

If you are interested to learn Web Development, then register for this Web Development Online Course by Intellipaat.