41

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.

1

13 Answers 13

56

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.

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

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.

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

1
  • 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"). Jul 19, 2020 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.

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

1

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.

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

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.
    – Community Bot
    Nov 25, 2022 at 15:15
0

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

<head>
...
<base href="/">
...
</head>
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.

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.