'Stylesheet not loaded because of MIME-type

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 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/browsersync maybe?

Solution 1:^[1]

The issue, I think, was with a CSS library starting with comments.

While in development, I do not minify files and I don't remove comments. This meant that the stylesheet started with some comments, causing it to be seen as something different from CSS.

Removing the library and putting it into a vendor file (which is ALWAYS minified without comments) solved the issue.

Again, I'm not 100% sure this is a fix, but it's still a win for me as it works as expected now.

Solution 2:^[2]

For Node.js applications, check your configuration:

app.use(express.static(__dirname + '/public'));

Notice that /public does not have a forward slash at the end, so you will need to include it in your href option of your HTML:

href="/css/style.css">

If you did include a forward slash (/public/) then you can just do href="css/style.css".

Solution 3:^[3]

In most cases, this could be simply the CSS file path is wrong. So the web server returns status: 404 with some Not Found content payload of html type.

The browser follows this (wrong) path from <link rel="stylesheet" ...> tag with the intention of applying CSS styles. But the returned content type contradicts so that it logs an error.

Solution 4:^[4]

This error can also come up when you're not referring to your CSS file properly.

For example, if your link tag is

<link rel="stylesheet" href="styles.css">

but your CSS file is named style.css (without the second s) then there is a good chance that you will see this error.

Solution 5:^[5]

I had this error for a Bootstrap template.

<link href="starter-template.css" rel="stylesheet">

Then I removed the rel="stylesheet" from the link, i.e.:

<link href="starter-template.css">

And everything works fine. Try this if you are using Bootstrap templates.

Solution 6:^[6]

I have changed my href to src. So from this:

<link rel="stylesheet" href="dist/photoswipe.css">

to this:

<link rel="stylesheet" src="dist/photoswipe.css">

It worked. I don't know why, but it did the job.

Solution 7:^[7]

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">.

Solution 8:^[8]

Comments in your file will trip this. Some minifiers will not remove comments.

ALSO

If you use Node.js and set your static files using express such as:

app.use(express.static(__dirname + '/public'));

You need to properly address the files.

In my case both were the issue, so I prefixed my CSS links with "/css/styles.css".

Example:

<link type="text/css" rel="stylesheet" href='/css/styles.css">

This solution is perfect as the path is the main issue for CSS not getting rendering

Solution 9:^[9]

In addition to using:

<base href="/">

Remove the rel="stylesheet" part from your css links:

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

Solution 10:^[10]

I simply referenced the CSS file (an Angular theme in my case) in the styles section of my Angular 6 build configuration in angular.json:

This does not answer the question, but it might be a suitable workaround, as it was for me.

Solution 11:^[11]

I know it might be out of context but linking a non existed file might cause this issue as it happened to me before.

<!-- bootstrap grid -->
<link rel="stylesheet" href="./css/bootstrap-grid.css" />

If this file does not exist you will face that issue.

Solution 12:^[12]

As mentioned solutions in this post, some of the solutions worked for me, but CSS does not apply on the page.

Simply, I just moved the "css" directory into the "Assest/" directory and everything works fine.

<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="assets/css/site.css" >

Solution 13:^[13]

Also for others using Angular-CLI and publishing to a sub-folder on the webserver, check this answer:

When you're deploying to a non-root path within a domain, you'll need to manually update the <base href="/"> tag in your dist/index.html.

In this case, you will need to update to <base href="/sub-folder/">

https://github.com/angular/angular-cli/issues/1080

Solution 14:^[14]

The problem is that if you have a relative path, and you navigate to a nested page, that would resolve to the wrong path:

<link rel="stylesheet" href='./index.css'>

so the simple solution was to remove the . since mine is a single-page application.

Like this:

<link rel="stylesheet" href='/index.css'>

so it always resolves to /index.css

There are a lot of answers to this question but none of them seem to really work. If you remove rel="stylesheet" it will stop the errors but won't apply the stylesheets.

The real solution:

Just remove the . it works then

Solution 15:^[15]

I got the same issue and then I checked that I wrote:

<base href="./"> in index.html

Then I changed to

<base href="/">

And then it worked fine.

Solution 16:^[16]

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">

Solution 17:^[17]

I have had the same problem.

If your project's structure is like the following tree:

index.html
assets
|-styles
  |-custom-style.css
server
  |- server.js

I recommend to add the following piece of code in server.js:

var path = require('path')
var express = require('express')
var app = express()

app.use('/assets', express.static(path.join(__dirname, "../assets")));

Note: Path is a built-in Node.js module, so it doesn't need to install this package via npm.

Solution 18:^[18]

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?

Solution 19:^[19]

Adding to a long list of answers, this issue also happened to me because I did not realize the path was wrong from a browser-sync point of view.

Given this simple folder structure:

package.json
app
  |-index.html
  |-styles
      |-style.css

the href attribute inside <link> in index.html has to be app/styles/style.css and not styles/style.css

Solution 20:^[20]

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

Solution 21:^[21]

How I solved this. For Node.js applications, you need to set your **public** folder configuration.

// Express js
app.use(express.static(__dirname + '/public'));

Otherwise, you need to do like href="public/css/style.css".

<link href="public/assets/css/custom.css">
<script src="public/assets/js/scripts.js"></script>

Note: It will work for http://localhost:3000/public/assets/css/custom.css. But couldn't work after build. You need to set app.use(express.static(__dirname + '/public')); for Express

Solution 22:^[22]

For a Node.js application, just use this after importing all the required modules in your server file:

app.use(express.static("."));

express.static built-in middleware function in Express and this in your .html file: <link rel="stylesheet" href="style.css">

Solution 23:^[23]

by going into my browsers console > network > style.css ...clicked on it and it showed "cannot get /path/to/my/CSS", this told me my link was wrong. i changed that to the path of my CSS file.

Original path before change was localhost:3000/Example/public/style.css changing it to localhost:3000/style.css solved it.

if you are serving the file from app.use(express.static(path.join(__dirname, "public"))); or app.use(express.static("public")); your server would pass "that folder" to the browser so adding a "/yourCssName.css" link in your browser solves it

By adding other routes in your browser CSS link, you'd be telling the browser to search for the css in route specified.

in summary... check where your browser CSS link points to.

Solution 24:^[24]

This is specific to Typescript+Express

I ctrl+f'd "Typescript" and ".ts" and found nothing in these answers, so I'll add my solution here, since it was caused by (my inexperience with) typescript, and the solutions I've read don't explicit solve this particular issue.

The problem was that Typescript was compiling my app.ts file into a javascript file in my project's dist directory, dist/app.js

Here's my directory structure, see if you can spot the problem:

??? app.ts
??? dist
?   ??? app.js
?   ??? app.js.map
?   ??? js
?       ??? dbclient.js
?       ??? dbclient.js.map
?       ??? mutators.js
?       ??? mutators.js.map
??? public
?   ??? css
?   ?   ??? styles.css
??? tsconfig.json
??? tslint.json
??? views
    ??? index.hbs
    ??? results.hbs

My problem is that in app.ts, I was telling express to set my public directory as /public, which would be a valid path if Node actually were running Typescript. But Node is running the compiled javascript, app.js, which is in the dist directory.

So having app.ts pretend it's dist/app.js solved my problem. Thus, I fixed the problem in app.ts by changing

app.use(e.static(path.join(__dirname, "/public")));

app.use(e.static(path.join(__dirname, "../public")));

Solution 25:^[25]

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';

Solution 26:^[26]

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

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

Solution 27:^[27]

In my case, when I was deploying the package live, I had it out of the public HTML folder. It was for a reason.

But apparently a strict MIME type check has been activated, and I am not too sure if it's on my side or by the company I am hosting with.

But as soon as I moved the styling folder in the same directory as the index.php file I stopped getting the error, and styling was activated perfectly.

Solution 28:^[28]

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.

Solution 29:^[29]

Bootstrap styles not loading #3411

https://github.com/angular/angular-cli/issues/3411

I installed Bootstrap v. 3.3.7
```
npm install bootstrap --save
```

Then I added the needed script files to apps[0].scripts in the angular-cli.json file:

"scripts": [
    "../node_modules/bootstrap/dist/js/bootstrap.js"
],

// And the Bootstrap CSS to the apps[0].styles array

"styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.css"
],

I restarted ng serve

It worked for me.

Solution 30:^[30]

if browser can not find related css file, it could give this error.

If you use Angular application you do not have to put css file path on index.html

 <link href="xxx.css" rel="stylesheet"> -->

You could put related css file path on styles.css file.

@import "../node_modules/material-design-icons-iconfont/dist/material-design-icons.css";

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Peter Mortensen
Solution 2	Peter Mortensen
Solution 3	Peter Mortensen
Solution 4	Peter Mortensen
Solution 5	Peter Mortensen
Solution 6
Solution 7	Peter Mortensen
Solution 8	Surekha K
Solution 9
Solution 10	Peter Mortensen
Solution 11	Safwat Fathi
Solution 12	Peter Mortensen
Solution 13	Peter Mortensen
Solution 14
Solution 15	Peter Mortensen
Solution 16	Peter Mortensen
Solution 17
Solution 18	Peter Mortensen
Solution 19
Solution 20	Neithan Max
Solution 21
Solution 22	Peter Mortensen
Solution 23	bahri noredine
Solution 24
Solution 25	Alex Gongadze
Solution 26	Sanjay Choubey
Solution 27	Peter Mortensen
Solution 28	Peter Mortensen
Solution 29	Peter Mortensen
Solution 30	Ahmet Arslan

'Stylesheet not loaded because of MIME-type

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]

Solution 10:[10]

Solution 11:[11]

Solution 12:[12]

Solution 13:[13]

Solution 14:[14]

Solution 15:[15]

Solution 16:[16]

Solution 17:[17]

Solution 18:[18]

Solution 19:[19]

Solution 20:[20]

Solution 21:[21]

Solution 22:[22]

Solution 23:[23]

Solution 24:[24]

Solution 25:[25]

Solution 26:[26]

Solution 27:[27]

Solution 28:[28]

Solution 29:[29]