Stylesheet not loaded because of MIME-type
This error can also come up when you're not referring to your CSS file properly.
For example, if your link tag is
<link rel="stylesheet" href="styles.css">
but your CSS file is named style.css
(without the second s) then there is a good chance that you will see this error.
In most cases, this could be simply the CSS file path is wrong. So the web server returns status: 404
with some Not Found
content payload of html
type.
The browser follows this (wrong) path from <link rel="stylesheet" ...>
tag with the intention of applying CSS styles. But the returned content type contradicts so that it logs an error.
For Node.js applications, check your configuration:
app.use(express.static(__dirname + '/public'));
Notice that /public
does not have a forward slash at the end, so you will need to include it in your href option of your HTML:
href="/css/style.css">
If you did include a forward slash (/public/
) then you can just do href="css/style.css"
.
The issue, I think, was with a CSS library starting with comments.
While in development, I do not minify files and I don't remove comments. This meant that the stylesheet started with some comments, causing it to be seen as something different from CSS.
Removing the library and putting it into a vendor file (which is ALWAYS minified without comments) solved the issue.
Again, I'm not 100% sure this is a fix, but it's still a win for me as it works as expected now.