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

---

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

Virga

See here. This answer helped me. – Uncap

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.

E.g. for Vue 2 / Vue CLI you need to engage the publicPath option. For Vue 3 / Vite use Public Base Path.

Acro

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

Disorganization

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.

Jacqualinejacquard

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",
            ],

Agrarian

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"). – Condenser

Answer 5

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.

Trapezium

Answer 6

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: "/",
},

Osteology

Answer 7

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.

Cockeye

Answer 8

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

<head>
...
<base href="/">
...
</head>

Pharynx

Answer 9

Literally I tried everything, I got the same error in my React project when I try to deploy it to the ic Blockchain. Finally I added all the styles to my index.html file using the HTML <style> tags. That was the only way to solve my issue.

Gratian

Answer 10

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

Gracielagracile

Answer 11

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 ~

Aleshia

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

Answer 12

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.

Penley

Answer 13

Try checking whether the file extension's case is consistent, might work!

For me the same bug appears, turns out that I named the file extension .css but referred to it as .CSS

Mauer

Answer 14

The files might be found. Look in the browser debug console.

I'm using nodejs and express. In my case the linked files were not found because the path was not correct.

I had created added a directory of the same name as a route. For that reason, the URL was changed to a path directory and the file paths in the HTML were resolved to that sub directory. The page was still served but the URL was changed.

I had a route named, output and I had a directory named output.

When I visited, example.com/output nodejs or express rewrote that path in the browser to, example.com/output/ and the linked assets in the HTML paths were changed from styles.css to output/styles.css. It added a slash onto the end of the route.

There are a few options that solved it:

• Removing or renaming the directory of the same name solved the issue.

• adding a base path in the HTML page solved it.

<base href="/">

• If there is an option to prevent the Express server from adding a slash at the end it will be listed here.

Bengali