Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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 #170

Closed
maathi opened this issue Feb 17, 2018 · 140 comments

Comments

@maathi
Copy link

maathi commented Feb 17, 2018

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

it's not applying the style for some reason :
froalastyle
any ideas please ?

@stefanneculai
Copy link
Contributor

@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
Copy link

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
Copy link

@mehdi-desu did you solve your issue?

@3amroSalem
Copy link

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
Copy link

connect2amitu commented May 2, 2018

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

@Jeeva-Rathinam
Copy link

Did you solve the issue?

@3amroSalem
Copy link

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
Copy link

dharmmaurya563 commented May 6, 2018

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

@hgsigner
Copy link

@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
Copy link

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

@DaoFof
Copy link

DaoFof commented May 16, 2018

@connect2amitu it doesn't work for me

@claudialphonse78
Copy link

@connect2amitu this trick worked ,thanks a lot!

@frempongandrews
Copy link

frempongandrews commented May 19, 2018

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

@krasicji
Copy link

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
Copy link

atinyakov commented May 24, 2018

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
Copy link

sudiptosen commented Jun 11, 2018

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
Copy link

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
Copy link

Having the same issue currently.

@iamsuyogbankar
Copy link

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
Copy link

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

@TheSLX
Copy link

TheSLX commented Jul 3, 2018

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
Copy link

Rich0101 commented Aug 2, 2018

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
Copy link

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

@Piligrim25
Copy link

Just add type="text/html"
Like this

@keeve
Copy link

keeve commented Aug 9, 2018

@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
Copy link

@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
Copy link

Tks @connect2amitu it works fine

@pathum-kalhan
Copy link

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
Copy link

Kamalabot commented Jun 9, 2022

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

@gvasudha003
Copy link

@ovidiup13 is your problem solved I have same problem.

@gvasudha003
Copy link

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

I works but unfortunately css is not applied

@LautaroLorenz
Copy link

LautaroLorenz commented Jun 26, 2022

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

image

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
Copy link

Hi guys,
while learning Dapps i have faced this error i am unable to load image and css styles to the browser.
image
image
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
Copy link

i am doing the project from wsl in windows

@franzwcom
Copy link

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

@jerlabor
Copy link

jerlabor commented Sep 6, 2022

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

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

@Jomedi
Copy link

Jomedi commented Dec 6, 2022

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

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

@mohammedjodi
Copy link

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

@Eunit99
Copy link

Eunit99 commented Dec 13, 2022

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

solved

@abhisheksurela79
Copy link

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
Copy link

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
Copy link

Davidchanz commented Apr 1, 2023

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
image

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

@paaatcha
Copy link

paaatcha commented Apr 6, 2023

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

Thanks, man! It solved my problem! <3

@mikegyamfi
Copy link

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
Copy link

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 image

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
Copy link

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
Copy link

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
Copy link

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

@celsiusdv
Copy link

was facing

image 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
Copy link

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

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

@kapil26021994
Copy link

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

@AMilinovic0801
Copy link

AMilinovic0801 commented Feb 7, 2024

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
Copy link

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

@SEA6153
Copy link

SEA6153 commented May 17, 2024

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.

html1

1sec

@juara-digital
Copy link

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

This is worked for me, thanks 😁

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests