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

Question

I have a Vue.js project, when I check the console found this issue bellow:

Refused to apply style from 'http://localhost:8080/dist/cropper.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

---

I searchedSO, found a Angular related post, but it do not helps me, they are based on different frontend framework.

Answer 1

The usual reason for this error message is that when the browser tries to load that resource, the server returns an HTML page instead, for example if your router catches unknown paths and displays a default page without a 404 error. Of course that means the path does not return the expected CSS file / image / icon / whatever.

To make sure you are in that case, copy the path and try to access it directly in a new browser window or tab. You will see what your server sends.

The solution is to find the correct path and router configuration so that you get your plain CSS file / image / etc. when accessing that path.

The exact path and router configuration depends on how you have setup your project and the framework you are using.

Answer 2

You provided insufficient information. But i had the same problem, so i have a solution.

Say you @import css files in a component's style block. So my problem was in path that i specified. And the error message Refused to apply style appeared because of wrong path. I thought that my src path alias ~ is resolved in a style block, but it wasn't.

All i had to do is to specify /src/assets/css... instead of ~/assets/css...

Answer 3

I got exact same problem " Refused to apply style from 'http://localhost:8080/css/formatting.css' because its MIME type ('application/json') is not a supported stylesheet MIME type ..."

I browse through the window explorer and corrected the file paths (folders) as i intended to. There was also spelling error in the addressing like the path was as above (formatting.css or double 't') but the file actually was formating.css (single 't') and the problem solved. Some solutions are not expensive at all. Thanks.

Answer 4

yo have to change the place of your file css into the directory assets assets/style.css

and then put these path in your file index.html src/index.html

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

in addition you have to modify to file angular.json in styles

"styles": [
              "src/assets/style.css",
              "./node_modules/materialize-css/dist/css/materialize.min.css",
            ],