Over the past few years, the following error has become very common in the browser console:
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.
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.
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.
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
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.
There are also many bad solutions on the internet. Don't use these:
- Do not delete the
relattribute 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
src. The error message also disappears, but the browser still does not load the stylesheet. Besides,
srcis not a valid attribute for the link element.
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:
The html code you edit is located in the src directory and looks like this:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style/style.css" />
Suppose, that a webpack build procedure generates the corresponding CSS file from the SCSS files and places it in the
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:
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.