Stylesheet not loaded because of MIME-type

Question

I'm working on a website that uses gulp to compile and browser sync to keep the browser synchronised with my changes.

The gulp task compiles everything properly, but on the website, I'm unable to see any style, and the console shows this error message:

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

Now, I don't really understand why this happens.

The HTML includes the file like this (which I am pretty sure is correct):

<link rel="stylesheet" type="text/css" href="assets/styles/custom-style.css"/> 

And the stylesheet is a merge between Bootstrap & font-awesome styles for now (nothing custom yet).

The path is correct as well, as this is the folder structure:

index.html assets |-styles   |-custom-style.css 

But I keep getting the error.

What could it be? Is this something (maybe a setting?) for gulp/browsersync maybe?

Answer 1

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

Answer 2

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.