Solving the stylesheet not loaded because of MIME-type

Last updated: Jul 13, 2023 - by: C. Smith

Over the past few years, the following error has become very common in the browser console:

Refused to apply style from 'http://127.0.0.1:5500/styles/styles.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Plenty of developers face this problem regardless of the web technology used. So this is not a node.js, angular, express, webpack, spring, or whatever issue. Any surprising, but in 95% of cases, it’s a simple 404 Not Found error.

not_found

Quick check

You can also check for yourself if this is the problem. If you check on the network tab of the developer tool, you will probably see that the browser cannot load the stylesheet file. Or click on the link referenced in the error message, and most likely, you will see some kind of "not found" error in a new browser tab.

Solution

Check again carefully for typos in the link. Then again, seriously! In most cases, an omitted or forgotten letter s or .min extension is the culprit.

If you are sure that this is not a problem, then for some reason the web server you are using will not make the stylesheet file available on this path. And this is already going to be a configuration issue. That is already technology-dependent so accordingly, you need to continue to look for the reason why the file is not available. I can’t present these here because there are too many and I don’t even know them all.

The point is to change your search term and not look for the original error, but why the file is not available.

Why is this the error message then?

The key is the X-Content-Type-Options response HTTP header. By default, some web servers send this header parameter with a value of nosniff . As a result, the browser blocks the stylesheet request if the MIME-type is not "text/css".

request_cancelled
That's fine, but I specified a "text/css" type in the code, so what's the problem? Because the requested file could not be found, the server returns a 404 error message, which is already "text/html" and is therefore not accepted as a valid stylesheet. See more details here.

Wrong solutions

There are also many bad solutions on the internet. Don't use these:

Do not delete the rel attribute from the link element. The error will indeed disappear, but the browser will not apply that stylesheet.
Do not want to turn off MIME checking. Although the error message disappears from the console, the style sheet still does not load.
Do not replace the href attribute with src . The error message also disappears, but the browser still does not load the stylesheet. Besides, src is not a valid attribute for the link element.

A possible solution with VSCode and LiveServer

If you are using the Visual Studio Code Editor and using the LiveServer plugin to test your web pages, you may have the wrong directory set as the root directory.

For example, consider the following simplified project structure:

Example project structure

The html code you edit is located in the src directory and looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stylseet test</title>
    <link rel="stylesheet" href="./style/style.css" />
</head>
<body>
    <h1>Stylesheet error</h1>
</body>
</html>

Suppose, that a webpack build procedure generates the corresponding CSS file from the SCSS files and places it in the /dist folder.

In this case, if the default root folder of the LiveServer is the src folder, then the unexpected "Refused to apply style..." error is already displayed on the console.

Fortunately, the solution in this case is very simple. You need to specify in the VSCode configuration and set the /dist folder as the LiveServer root.

To do this, press F1 , then type owsj . This will bring up the "Open Workspace Settings (JSON)" item in the list, which you can select to edit the settings.

And the setting is simple:

{
    "liveServer.settings.root": "/dist"
}

Restart LiveServer and check the result.

Note: As I have written before, there are many reasons why the web server cannot find the required css file. The solution presented here is just one of many possible solutions.