35

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

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.

enter image description here

I searchedSO, found a Angular related post, but it does not help me, the two are based on different frontend frameworks.

Dave
  • 11
  • 5
user7693832
  • 6,119
  • 19
  • 63
  • 114

11 Answers11

48

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.

ghybs
  • 47,565
  • 6
  • 74
  • 99
6

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

Alex Freshmann
  • 481
  • 5
  • 14
4

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.

ashenafi duressa
  • 41
  • 2
2

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",
            ],
ricnef2121
  • 64
  • 4
  • This method run properly also. If you use déclaration in HTML file : write "/assets/styles.css" (or "/assets/styles.scss"). In angular.json : Write "/src/assets/styles.css" (or "/src/assets/styles.scss"). – Vifier Lockla Jul 19 '20 at 12:38
1

It might also occur when you set incorrect BUILD directory in package.json. for example

// Somewhere in index.js
// Client Build directory for the Server
app.use(express.static(path.resolve(__dirname, '../this-client/**build**')));

then package.json:

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start",
    "build-package-css": "cp src/assets/css/my-this-react.css **build**/my-this-react.css",
    "build-package": "npm run build-package-css && babel src --out-dir **build**"
  },

The directories I marked as Bold should be the same. If there is a difference then it won't run.

Mapenzi
  • 11
  • 1
1

I was dealing with the same problem with my React project, and the solution I found was to add a "publicPath" to the output in webpack.config.js.

output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
    publicPath: "/",
},
Lázaro V.C.
  • 11
  • 1
1

I encountered the same error when running my app in production. With npm run serve everything worked but the result of npm run build resulted in that same error. It turns out that I was using vue router in history mode and my nginx server wasn't properly configured.

I changed vue router to hash mode and stopped getting that error message. Try using hash mode and see if the message goes away. If it does then you need to tweak your web server settings.

ferbarra
  • 71
  • 5
0

I ran into this issue.. I was integrating some scss files into my project and just presumed that I should use the

rel="stylesheet"

<link href="/epic.scss" rel="stylesheet" type="text/css">

once I removed the attribute no more style sheet issues...

Working .scss file

 <link href="/epic.scss" type="text/css">
Lenn Dolling
  • 1,300
  • 13
  • 23
0

in my case , I just changed the link tag from<link href="Content/charity/bootstrap-icons.css" rel="stylesheet"> to <link href="~/Content/charity/bootstrap-icons.css" rel="stylesheet">and it worked . just add ~

Siddharth S
  • 1
  • 1
  • 1
    Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Nov 25 '22 at 15:15
0

For my case (not for vue.js) adding the "base" tag solved the error:

<head>
...
<base href="/">
...
</head>
SNS - Web et Informatique
  • 457
  • 4
  • 9
0

I know this is a bit too late but for anyone coming from Laravel inertia-react space, I faced the same issue. The whole application was blank with the same error of "Refused to apply style...". For me, it was my first time building and deploying a Laravel inertia-react project to shared hosting.

What you need to do is move the build folder in the public directory to your server root. Then, move the manifest.json file in the build folder back to the public/build folder.

The application throws an error if the manifest.json file is not found in that directory. Clear your browser and application caches and you're good to go.

Leonard203
  • 61
  • 6