Stylesheet not loaded because of MIME-type

I'm working on a website that uses gulp to compile and browser sync to keep the browser synced 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.

Any idea what it could be? is this something (maybe a setting?) for gulp/browsersync maybe?

Any help is really appreciated, and feel free to ask for more details if needed.

Thanks

1 answer

  • answered 2018-01-14 10:52 Yunior González Santana

    You can open the chrome tools, select the network tab, reload your page and find the file request of the css and look for what it have inside the file. Maybe you did something wrong when you merge the two libraries in your file, including some characters or headers not properly for css ?