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 :confused:

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

[gladtobhere]

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]

have the same error and these solutions aren't working

[piliugin]

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: https://github.com/webpack/webpack/issues/3027

[raulra08]

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]

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]

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]

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

[Avi308]

@connect2amitu Thank you :)

[akshaymittal143]

worked for me as well. Thanks

[shahramverb]

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

[ujikit]

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

nice trick (y), working like a charm.

[ranakhurram666]

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

Thanks, it fixed the issue.

[errepy]

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

[ghost]

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]

"" is working fine for me . thank you.

[yonatanLehman]

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]

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

[krishnavaddepally]

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

[bhagirath-patadia]

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]

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]

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

[vigneshikl]

Can you please share the file references ? @hendisantika