Refused to apply style from <URL> because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled angular

[maathi]

i got the following issue after installing froala on my angular app.

it's not applying the style for some reason :

any ideas please ?

[stefanneculai]

@mehdi-desu it looks like the CSS files are loaded as HTML instead of Stylesheets. It appears to be something like this: https://stackoverflow.com/questions/48248832/stylesheet-not-loaded-because-of-mime-type.

[craigpearson]

As this shows up a lot in Google Search results I thought I'd share that in similar projects this appears to be due to the inclusion of HBP5 directives for Nginx.

If the extra security file below is included, then stylesheets being served through proxies such as webpack will fail to load due to CSP. See the notes on Line 17 below

https://github.com/h5bp/server-configs-nginx/blob/master/h5bp/directive-only/extra-security.conf

Although this setting has been in HBP5 configs for a while, webkit browsers have only just started enforcing it. Hope this helps others

[Jeeva-Rathinam]

@mehdi-desu did you solve your issue?

[3amroSalem]

Having same issue
Refused to apply style from...styles.f4fb5cb8ad4ea5bce7fb.bundle.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

[connect2amitu]

Add <base href="/"> in head before linking all css files

[Jeeva-Rathinam]

Did you solve the issue?

[3amroSalem]

in my case I already had in my index for some reason the issue is gone when I used --aot to compile my project.

[dharmmaurya563]

The issue is not resolved
http://prntscr.com/jecsmv

[hgsigner]

@connect2amitu you saved my day here :) I was having this problem with react and react router running with webpack-dev-server and <base href="/"> does the trick.

[vanoMekantsishvili]

@connect2amitu this trick actually works for me too but can you explain how this thing works? thank you : )

[DaoFof]

@connect2amitu it doesn't work for me

[claudialphonse78]

@connect2amitu this trick worked ,thanks a lot!

[frempongandrews]

<base href="/">
Worked for me, thanks!!

[krasicji]

I think the root cause of the issue is that the minified css has comments in them. Check out https://stackoverflow.com/questions/48248832/stylesheet-not-loaded-because-of-mime-type

[atinyakov]

I think the root cause of the issue is that the minified css has comments in them

minified css does not contain comments.

I have faced the issue as well, in my case, the css file was missing, but defined in HTML

[sudiptosen]

I do not think that the content of the css matters. For example, in my index.html, I tried replacing the Material Icons css with a local version as follows:

<!--<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">-->
<link rel="stylesheet" type="text/css" href="google_material.css">

I get the same error when the google_material.css is blank!

[arduino731]

I was using Node npm module on my project without angular frameworks. I m using Embedded JavaScript templates (EJS). I added new folders and it keeps showing error loaded of CSS style and js files, so I have decided to put into head.html
<base href="/"
Those are solved problems. thank you!

[Youssef-Ait-Elhaj]

Having the same issue currently.

[iamsuyogbankar]

i have same issue .i have tried this much but still img is not getting load.what should i do?

              <!-- <img [src]="fullImagePath" alt="suyog" class="img-fluid">   -->
              <img src="/suyog.jpg" alt="suyog" class="img-fluid">

[iamsuyogbankar]

i have saved photo in c folder.how to give path?

[TheSLX]

Not sure if this will help anyone, but if you are using angular-cli, I fixed this by removing the css reference from my index.html and adding it to the angular-cli.json file under the "style" portion.
After restarting my webserver I no longer had that issue.

[Rich0101]

Adding <base href="/"> before linking the stylesheets didn't work for me, but taking the rel property off the <link> tag did work:

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

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

[ovidiup13]

@Rich0101 The error disappears but the styles are not applied unfortunately 😕

[Piligrim25]

Just add type="text/html"
Like this

[keeve]

@Rich0101 your trick works for me, even with comments in my css.

@ovidiup13 debug your page in chrome, probably there's a css overriding your style.
I'm using Angular Material and I wanted to make the button's font smaller, so what I did is explicitly have css for the entire body and manipulate mat-button like this

.body-container .mat-button {
font-size: small !important;
}

It works :)

[arshad115]

@connect2amitu <base href="/"> also didn't work for me.
@Rich0101 solution worked by removing the stylesheet property and adding type="text/html" in the link tag.

[ulrichdohou]

Tks @connect2amitu it works fine

[pathum-kalhan]

Errors and solutions are weird sometimes.
What worked for me is keep rel="stylesheet" and additionally add the type="text/css" also <base href="/"> would not worked for me.

[Kamalabot]

All pages of my blog site was loading the CSS correctly, except for the blog-post page, which I was populating using the
http://localhost:3000/blog-post/<Mongodb_id> Started getting the error, and page was looking very unpleasant.

Adding base href="/" below the <title> tag before the tags got it working in the header.ejs file solved the issue.

[gvasudha003]

@ovidiup13 is your problem solved I have same problem.

[gvasudha003]

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

I works but unfortunately css is not applied

[LautaroLorenz]

same problem with ElectronJs and AngularJs if url has a param like:

const routes: Routes = [{
    path: 'editar-template-ensayo/:id',
    component: EssayTemplateBuilderComponent
}]

After page reload

To save the situation I change URL params yo queryParams:

From
[routerLink]="['/editar-template-ensayo', element.id]"

To

routerLink="/editar-template-ensayo"
[queryParams]="{id: element.id}"

[shankar55]

Hi guys,
while learning Dapps i have faced this error i am unable to load image and css styles to the browser.


In the above image i am unable to load the image i hav tried lot if any one have the solution pls share it

[shankar55]

i am doing the project from wsl in windows

[franzwcom]

it needs to mount the folder where the css files are ...
"storybook": "cross-env NODE_ENV=development start-storybook -s ./dist -p 6006",

[jerlabor]

adding this line of code to my nginx server solved my problem

# Include MIME Types
include /etc/nginx/mime.types

[Jomedi]

Add <base href="/"> in head before linking all css files

MAANNNN YOU SAVED MY PROEJCTT!!!! THANKSSSS VERY MUCHHH

[mohammedjodi]

none of this ones worked for me please if you have the solution please share with me

[Eunit99]

Adding <base href="/"> in public/index.html in my React application solved the issue for me as well.

[abhisheksurela79]

Could you please explain the purpose of the <base href="/"> tag? I encountered the same MIME error in my Django app, and using this tag helped resolve the issue, but I am not sure why it was effective. Could you provide some insight into how it functions in this context?

[makan-dianka]

if you are using django, you may forget to install whitenoise when debug turn off.

pip install whitenoise

then append this into middleware variables in the settings file

"whitenoise.middleware.WhiteNoiseMiddleware",

[Davidchanz]

If you write on Spring, maybe problem with security, you cannot get access to any files include css and js while you are not login

Made like on Image
"/styles/" - is directory with all your CSS.
"/scripts/" - is directory with all your JavaScript.

[paaatcha]

Add <base href="/"> in head before linking all css files

Thanks, man! It solved my problem! <3

[mikegyamfi]

if you are using django, you may forget to install whitenoise when debug turn off.

pip install whitenoise

then append this into middleware variables in the settings file

"whitenoise.middleware.WhiteNoiseMiddleware",

Thanks a lot. That did the trick for me. Bless you.

[buiphihien24032001]

If you write on Spring, maybe problem with security, you cannot get access to any files include css and js while you are not login

Made like on Image "/styles/" - is directory with all your CSS. "/scripts/" - is directory with all your JavaScript.

Hi bro. Thank you very much. Your solution has solved my problem.

[Galigao07]

if you are using django, you may forget to install whitenoise when debug turn off.

pip install whitenoise

then append this into middleware variables in the settings file

"whitenoise.middleware.WhiteNoiseMiddleware",

YOUR MY LIFE SAVER THANK YOU VERY VERY MUCH..

[NikYurchik]

if you are using django, you may forget to install whitenoise when debug turn off.
pip install whitenoise
then append this into middleware variables in the settings file
"whitenoise.middleware.WhiteNoiseMiddleware",
Thank you! It helped me too.

[hossam43]

Just create a 'public' directory and place all your static files and folders inside it.

[celsiusdv]

was facing

Add <base href="/"> in head before linking all css files

works perfectly!!!! thanks a lot man, was facing this issue doing react app with spring boot but that tiny tag seems to be super important, thanks so much!!

[peixiaotan1]

Add <base href="/"> in head before linking all css files

I fixed it, but I don't understand why.

[kapil26021994]

Hi @connect2amitu I have tried your solution but still not resolved can you tell me any another solution?

[AMilinovic0801]

So if anyone is still struggling what worked for me was the following: my links were written like ../web-shop/css-sytle/style.css and the server would not for the life of me find these links. They worked fine directly from the HTML file. What I had to do is write it /web-shop/css-style/style.css. And that worked like a charm. Man I lost 5 days on this.

[ooyanpaing222]

change style.css to index.css. it will solve.

[SEA6153]

Hi guys, I'm using Spring Boot - Thymeleaf and I tried all thing what you write but nothing happened. Thymeleaf or IntelliJ(I don't know which one is) doesn't see my CSS files. Could you help me please?

These are my codes.

[juara-digital]

Add <base href="/"> in head before linking all css files

This is worked for me, thanks 😁