Webserver lädt CSS nicht

.BritainAndy · 12/12/2018, 12:46

Hallo zusammen,
Ich hab ein Problem und kriegs irgendwie nicht gelöst.
Ich wollte aus Testgründen eine kleine Website erstellen, die den BMI errechnet.
Dabei will ich die Berechnung im Backend durchführen und nutze dafür NodeJS mit dem ExpressJS framework.

Mein Problem ist folgendes:
Wenn ich die website statisch im Browser betrachte, also unter "file:///home/xxx/index.html" wird alles richtig dargestellt.
Wenn ich aber nun den kleinen webserver starte und mir die Seite unter "http://localhost:3000/" anschaue, wird meine CSS-Datei nicht geladen und ich kriege auch folgenden Fehler :

Quote:

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

Habe natürlich schon gegoogelt und habe folgende Lösungansätze probiert die aber nicht geholfen haben:

Spoiler

So sollte es eigentlich aussehen:

Spoiler

So sieht es aus:

Spoiler

Leider hat nichts davon geholfen.
Ich würde mich über jede Hilfe freuen!

Liebe Grüße

Serraniel · 12/12/2018, 18:18

Wie sieht denn dein head Block aktuell aus von der Art wie du die css einbindest?

.BritainAndy · 12/12/2018, 18:42

Der head-Block sieht wie folgt aus:

Spoiler

und meine index.js die den Server started:

Spoiler

False · 12/12/2018, 22:21

Wieso nutzt du type="text/html" ?
Es müsste type="text/css" logischerweiße sein da du eine css Datei einbindest und kein Html !
Kenne mich aber mit dem javashit gedönse leider nicht so aus, aber evtl. reicht da ja schon..
Hast du den in den Devtools geschaut ob die Dateigeladen wird und mit welchem Mimetype ?

.BritainAndy · 12/12/2018, 23:09

Edit//

Ich habe es gelöst.
Ich musste in der index.js folgendes hinzurügen:

Spoiler

Danke für eure Hilfe!

False · 12/13/2018, 20:08

Quote:

Originally Posted by .BritainAndy

Edit//

Ich habe es gelöst.
Ich musste in der index.js folgendes hinzurügen:

Spoiler

PHP Code:

app.get("/css/style.css", (request, response) => { response.sendFile(__dirname + "/css/style.css"); });

Danke für eure Hilfe!

Sieht sehr unschön aus und wird auch nicht die Lösung sein die das Framework "vorsieht".
Habe mal nach "expressjs static files" gegoogelt und das erste Egebniss war

.
Dort wird eine bessere Möglichkeit erklärt undzwar folgende:

Code:

app.use(express.static('public'));

Mit dieser Zeile werden automatisch dann alle Dateien im public Ordner ausgelieft wenn diese angefragt werden.
Andere Beispiele findest du auf der Seite.

.BritainAndy · 12/13/2018, 23:29

Vielen lieben Dank!

So ist es viel schöner!

Lg