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 had this error for a Bootstrap template.

<link href="starter-template.css" rel="stylesheet">

Then I removed the rel="stylesheet" from the link, i.e.:

<link href="starter-template.css">

And everything works fine. Try this if you are using Bootstrap templates.

Answer 2

Adding to a long list of answers, this issue also happened to me because I did not realize the path was wrong from a browser-sync point of view.

Given this simple folder structure:

package.json
app
  |-index.html
  |-styles
      |-style.css

the href attribute inside <link> in index.html has to be app/styles/style.css and not styles/style.css

Answer 3

This is specific to Typescript+Express

I ctrl+f'd "Typescript" and ".ts" and found nothing in these answers, so I'll add my solution here, since it was caused by (my inexperience with) typescript, and the solutions I've read don't explicit solve this particular issue.

The problem was that Typescript was compiling my app.ts file into a javascript file in my project's dist directory, dist/app.js

Here's my directory structure, see if you can spot the problem:

├── app.ts
├── dist
│   ├── app.js
│   ├── app.js.map
│   └── js
│       ├── dbclient.js
│       ├── dbclient.js.map
│       ├── mutators.js
│       └── mutators.js.map
├── public
│   ├── css
│   │   └── styles.css
├── tsconfig.json
├── tslint.json
└── views
    ├── index.hbs
    └── results.hbs

My problem is that in app.ts, I was telling express to set my public directory as /public, which would be a valid path if Node actually were running Typescript. But Node is running the compiled javascript, app.js, which is in the dist directory.

So having app.ts pretend it's dist/app.js solved my problem. Thus, I fixed the problem in app.ts by changing

app.use(e.static(path.join(__dirname, "/public")));

to

app.use(e.static(path.join(__dirname, "../public")));

Answer 4

This issue happens when you're using cli tool for either reactjs or angular, so the key is to copy the entire final build from those tools since they initialize they're own lite servers which confuses your URLs with back end server you've created... take that whole build folder and dump it on asset folder of your back end server project and ref them from your back end server and not the server which ships with Angular or Reactjs Otherwise you're using it as front end from a certain API server

Answer 5

I have changed my 'href' -> 'src'. So from this:

<link rel="stylesheet" href="dist/photoswipe.css">

to this:

<link rel="stylesheet" src="dist/photoswipe.css">

It worked. I don't know why, but it did the job.

Answer 6

My problem is that I was using webpack and in my HTML CSS link I had a relative path, and anytime I would navigate to a nested page, that would resolve to the wrong path:

<link rel="stylesheet" href='./index.css'>

so the simple solution was to remove the . since mine is a single-page application.

Like this:

<link rel="stylesheet" href='/index.css'>

so it always resolves to /index.css