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

Answer 1

I simply referenced the CSS file (an Angular theme in my case) in the styles section of my Angular 6 build configuration in angular.json:

This does not answer the question, but it might be a suitable workaround, as it was for me.

Answer 2

In my case, when I was deploying the package live, I had it out of the public HTML folder. It was for a reason.

But apparently a strict MIME type check has been activated, and I am not too sure if it's on my side or by the company I am hosting with.

But as soon as I moved the styling folder in the same directory as the index.php file I stopped getting the error, and styling was activated perfectly.

Answer 3

I got the same issue and then I checked that I wrote:

<base href="./"> in index.html

Then I changed to

<base href="/">

And then it worked fine.

Answer 4

I have had the same problem.

If your project's structure is like the following tree:

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

I recommend to add the following piece of code in server.js:

var path = require('path')
var express = require('express')
var app = express()

app.use('/assets', express.static(path.join(__dirname, "../assets")));

Note: Path is a built-in Node.js module, so it doesn't need to install this package via npm.

Answer 5

by going into my browsers console > network > style.css ...clicked on it and it showed "cannot get /path/to/my/CSS", this told me my link was wrong. i changed that to the path of my CSS file.

Original path before change was localhost:3000/Example/public/style.css changing it to localhost:3000/style.css solved it.

if you are serving the file from app.use(express.static(path.join(__dirname, "public"))); or app.use(express.static("public")); your server would pass "that folder" to the browser so adding a "/yourCssName.css" link in your browser solves it

By adding other routes in your browser CSS link, you'd be telling the browser to search for the css in route specified.

in summary... check where your browser CSS link points to.

Answer 6

if browser can not find related css file, it could give this error.

If you use Angular application you do not have to put css file path on index.html

 <link href="xxx.css" rel="stylesheet"> -->

You could put related css file path on styles.css file.

@import "../node_modules/material-design-icons-iconfont/dist/material-design-icons.css";