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 synchronised with my changes.

The gulp task compiles everything

Answer 1

I had this problem with a site I knew worked online when I moved it to localhost and PhpStorm.

This worked fine online:

    <link rel="stylesheet" href="/css/additional.css">

But for localhost I needed to get rid of the slash:

    <link rel="stylesheet" href="css/additional.css">

So I am reinforcing a few answers provided here already - it is likely to be a path or spelling mistake rather than any complicated server setup problem. The error in the console is a red herring; the network tab needs to be checked for the 404 first.

Among the answers provided here are a few solutions that are not correct. The addition of type="text/html" or changing href to src is not the answer.

If you want to have all of the attributes so it validates on the pickiest of validators and your IDE then the media value should be provided and the rel should be stylesheet, e.g.:

    <link rel="stylesheet" href="css/additional.css" type="text/css" media="all">

Answer 2

You can open the Google Chrome tools, select the network tab, reload your page and find the file request of the CSS and look for what it have inside the file.

Maybe you did something wrong when you merged the two libraries in your file, including some characters or headers not properly for CSS?

Answer 3

Make a folder just below/above the style.css file as per the Angular structure and provide a link like <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">.

Answer 4

In case you using Express with no JS try with:

app.use(express.static('public'));

As an example, my CSS file is at public/stylesheets/app.css

Answer 5

Remove rel="stylesheet" and add type="text/html". So it will look like this -

<link  href="styles.css" type="text/html" />

Answer 6

If you are setting Styles in JavaScript as:

    var cssLink = document.createElement("link");
    cssLink.href = "./content.component.scss";
    cssLink.rel = "stylesheet";
   --> cssLink.type = "html/css";
    (iframe as HTMLIFrameElement).contentDocument.head.appendChild(cssLink);

Then just change cssLint.type (denoted by arrow in above description) to "MIME":

   cssLink.type = "MIME";

It will help you to get rid of the error.