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
mehdi-desu opened this issue Feb 17, 2018 · 57 comments

Comments

Projects
None yet
@mehdi-desu
Copy link

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

This comment has been minimized.

Copy link
Contributor

commented Mar 1, 2018

@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

This comment has been minimized.

Copy link

commented Mar 30, 2018

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

This comment has been minimized.

Copy link

commented Apr 24, 2018

@mehdi-desu did you solve your issue?

@bonusware

This comment has been minimized.

Copy link

commented May 2, 2018

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

This comment has been minimized.

Copy link

commented May 2, 2018

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

@Jeeva-Rathinam

This comment has been minimized.

Copy link

commented May 3, 2018

Did you solve the issue?

@bonusware

This comment has been minimized.

Copy link

commented May 4, 2018

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

This comment has been minimized.

Copy link

commented May 6, 2018

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

@hgsigner

This comment has been minimized.

Copy link

commented May 11, 2018

@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

This comment has been minimized.

Copy link

commented May 14, 2018

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

@DaoFof

This comment has been minimized.

Copy link

commented May 16, 2018

@connect2amitu it doesn't work for me

@claudz1

This comment has been minimized.

Copy link

commented May 17, 2018

@connect2amitu this trick worked ,thanks a lot!

@frempongandrews

This comment has been minimized.

Copy link

commented May 19, 2018

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

@krasicji

This comment has been minimized.

Copy link

commented May 23, 2018

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

commented Jun 19, 2018

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!

@halt27

This comment has been minimized.

Copy link

commented Jun 29, 2018

Having the same issue currently.

@SuyogABankar

This comment has been minimized.

Copy link

commented Jun 30, 2018

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

This comment has been minimized.

Copy link

commented Jun 30, 2018

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

@TheSLX

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

commented Aug 5, 2018

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

@Piligrim25

This comment has been minimized.

Copy link

commented Aug 7, 2018

Just add type="text/html"
Like this

@keeve

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

commented Aug 9, 2018

@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

This comment has been minimized.

Copy link

commented Aug 9, 2018

Tks @connect2amitu it works fine

@pathum-kalhan

This comment has been minimized.

Copy link

commented Aug 13, 2018

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.

@gladtobhere

This comment has been minimized.

Copy link

commented Aug 14, 2018

I had this same prob. My folder structure wasn't right. Some how I created my "css" folder inside my "scripts folder". Double check your folder structure. Worked for me.

@pshoultz

This comment has been minimized.

Copy link

commented Aug 15, 2018

have the same error and these solutions aren't working

@piliugin

This comment has been minimized.

Copy link

commented Aug 17, 2018

In my case the problem was that webpack-dev-server returns text: "Cannot GET /dist/css/index.css".
So check that files exists.
Similar problem with js: webpack/webpack#3027

@raulra08

This comment has been minimized.

Copy link

commented Aug 30, 2018

This helped me,
https://blog.angularindepth.com/this-is-how-angular-cli-webpack-delivers-your-css-styles-to-the-client-d4adf15c4975

To realise that styles.css becomes styles.js, and therefore it should be included as a script at the bottom of the body rather than at the head as a link.

@wisedip

This comment has been minimized.

Copy link

commented Sep 1, 2018

Checking my file-Url helped me. Errors in your Url input is the main problem. Check whether you have included a static file to connect the view files to the query.
Recheck it. It took me 2 hours minimum to find the Error in the Url

@ming0627

This comment has been minimized.

Copy link

commented Sep 1, 2018

Im using MiniCssExtractPlugin and i realized missing '.' will caused below issue.

from

filename: '/style.[contenthash].css'

to

filename: './style.[contenthash].css'

//correct way should be like this

new MiniCssExtractPlugin({
  publicPath: './sass/',
  filename: './style.[contenthash].css'
});

Hope this help you.

@AvinashMV

This comment has been minimized.

Copy link

commented Sep 12, 2018

@connect2amitu <base href="/"> solved my issue. Thanks man!

@Avi308

This comment has been minimized.

Copy link

commented Sep 18, 2018

@connect2amitu Thank you :)

@akshaymittal143

This comment has been minimized.

Copy link

commented Sep 21, 2018

worked for me as well. Thanks
@shahramverb

This comment has been minimized.

Copy link

commented Sep 23, 2018

image

adding <base href="/"> before my link tags fixed my issue hope this helps others

@ujikit

This comment has been minimized.

Copy link

commented Sep 29, 2018

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

nice trick (y), working like a charm.

@ranakhurram666

This comment has been minimized.

Copy link

commented Nov 1, 2018

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

Thanks, it fixed the issue.

@errepy

This comment has been minimized.

Copy link

commented Nov 2, 2018

ajaa install globally please don't try the easy way... on angular.json in style use:
{
"input": "your url"
}
for every javascript you need to add to your project

@emilalsgndr

This comment has been minimized.

Copy link

commented Nov 22, 2018

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

nice trick (y), working like a charm.

thans its work for me (gulpjs)

@yeasin-Ahammed-apon

This comment has been minimized.

Copy link

commented Dec 22, 2018

"" is working fine for me . thank you.

@yonatanLehman

This comment has been minimized.

Copy link

commented Jan 3, 2019

The didn't work for me.
My problem was that the path to the file was in mixed lower and uppercase and the actual folder structure was in lowercase. My local machine is windows and the actual site is on a Heroku server which seems to be Linux. Also renaming my local folder to match the case of the link didn't to work, since in Git renaming a folder (and I suppose file) does not get passed on. I had to copy the folder aside, delete the original folder, git commit, git push, and then recreate the folder and commit and push again.

@vishaldocuments1995

This comment has been minimized.

Copy link

commented Jan 7, 2019

just updated the sass version of gulp file.
"gulp-sass": "3.0.0",
then run command gulp sass

@krishnavaddepally

This comment has been minimized.

Copy link

commented Mar 6, 2019

Okay! so I changed type="text/css" instead of html.
it worked.

@johnybravo123

This comment has been minimized.

Copy link

commented Apr 4, 2019

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

does the job for me

@vigneshikl

This comment has been minimized.

Copy link

commented Apr 10, 2019

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

Perfect! It works!

@hendisantika

This comment has been minimized.

Copy link

commented Apr 12, 2019

It's not working for me.
I don't know why.

Screen Shot 2019-04-12 at 08 18 09

@vigneshikl

This comment has been minimized.

Copy link

commented Apr 12, 2019

Can you please share the file references ? @hendisantika

@hendisantika

This comment has been minimized.

Copy link

commented Apr 12, 2019

Sorry, I misunderstood. My project is using Spring Boot not angular. But, I has same issue. Is it still related?

@vigneshikl

This comment has been minimized.

Copy link

commented Apr 15, 2019

I am not sure, but still wherever you have CSS file reference in your code. Try removing rel="Stylesheet"

@dollyshah-02

This comment has been minimized.

Copy link

commented Apr 17, 2019

removing rel attribute and adding type="text/html" removed my error.But it is not applying my styles.

@vigneshikl

This comment has been minimized.

Copy link

commented Apr 17, 2019

@dollyshah-02 It should be type="text/css". Isn't?

@Megas97

This comment has been minimized.

Copy link

commented May 2, 2019

@connect2amitu I had the same error but for 'application/json' type and weirdly not on all pages. Wasn't using Angular but your trick still fixed it for me as well. Thanks a lot :)

@saamtehraani

This comment has been minimized.

Copy link

commented May 8, 2019

I had the same error, I noticed that I have referenced font-awesome to wrong css file in angular.json file.

In fact references in angular.json and should be the same.

I made them the same and the problem solved.

image
image

@franciscosuca

This comment has been minimized.

Copy link

commented Jun 12, 2019

Just add type="text/html"
Like this

This worked for me on Vue js 2. Thanks a lot!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.