|
You last visited: Today at 15:20
Advertisement
Webserver lädt CSS nicht
Discussion on Webserver lädt CSS nicht within the Web Development forum part of the Coders Den category.
12/12/2018, 12:46
|
#1
|
elite*gold: 0 
Join Date: Jan 2010
Posts: 1,385
Received Thanks: 1,006
|
Webserver lädt CSS nicht
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:
HTML Code:
<base href="/">
bevor ich die CSS-Dateien im <head> linke- wenn ich die CSS linke, folgendes Attribut hinzufügen:
HTML Code:
type="text/html"
, das lässt den Fehler zwar weggehen, hat aber keinerlei Auswirkungen
- Serverside anstatt
PHP Code:
app.use(bodyParser.urlencoded({extended: true})); app.get("/", (request, response) => { response.sendFile(__dirname + "/index.html"); });
habe ich
PHP Code:
app.use(express.static(__dirname + '/public'))
benutzt und dann im link-Element beim href Attribut mal ein "/" vorm einbinden gesetzt: <href="/css/style.css">
- hab die CSS durch nen online minify-tool gejagt
So sollte es eigentlich aussehen:
So sieht es aus:
Leider hat nichts davon geholfen.
Ich würde mich über jede Hilfe freuen!
Liebe Grüße 
|
|
|
|
12/12/2018, 18:18
|
#2
|
elite*gold: 0
Join Date: May 2010
Posts: 6,853
Received Thanks: 5,106
|
Wie sieht denn dein head Block aktuell aus von der Art wie du die css einbindest?
|
|
|
|
|
12/12/2018, 18:42
|
#3
|
elite*gold: 0
Join Date: Jan 2010
Posts: 1,385
Received Thanks: 1,006
|
Der head-Block sieht wie folgt aus:
HTML Code:
<head>
<meta charset="utf-8">
<title>BMI Calculator</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
und meine index.js die den Server started:
PHP Code:
//jshint esversion:6
const express = require("express");
const app = express();
const bodyParser = require("body-parser");
const port = 3333;
app.use(bodyParser.urlencoded({
extended: true
}));
app.get("/", (request, response) => {
response.sendFile(__dirname + "/index.html");
});
app.listen(port, () => console.log("Server started on port: " + port));
|
|
|
|
|
12/12/2018, 22:21
|
#4
|
elite*gold: 0
Join Date: Apr 2011
Posts: 11,115
Received Thanks: 2,436
|
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 ?
|
|
|
|
|
12/12/2018, 23:09
|
#5
|
elite*gold: 0
Join Date: Jan 2010
Posts: 1,385
Received Thanks: 1,006
|
Edit//
Ich habe es gelöst.
Ich musste in der index.js folgendes hinzurügen:
PHP Code:
app.get("/css/style.css", (request, response) => {
response.sendFile(__dirname + "/css/style.css");
});
Danke für eure Hilfe!
|
|
|
|
|
12/13/2018, 20:08
|
#6
|
elite*gold: 0
Join Date: Apr 2011
Posts: 11,115
Received Thanks: 2,436
|
Quote:
Originally Posted by .BritainAndy
Edit//
Ich habe es gelöst.
Ich musste in der index.js folgendes hinzurügen:
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.
|
|
|
|
|
12/13/2018, 23:29
|
#7
|
elite*gold: 0
Join Date: Jan 2010
Posts: 1,385
Received Thanks: 1,006
|
Vielen lieben Dank!
So ist es viel schöner!
Lg
|
|
|
|
 |
Similar Threads
|
Apache2 Webserver lädt Datei welche nicht exestiert
12/31/2015 - Web Development - 0 Replies
//edit: Problem, wurde gelöst. Bitte löschen!
#closerequest
|
Black Ops II Kinomodus lädt, lädt und lädt [xbox360]
12/02/2012 - Call of Duty - 1 Replies
Hallo Community,
seit einiger Zeit geht der Kinomodus bei mir in Black Ops II auf der xBox 360 die Kinoaufnahme nicht mehr... Ist das nur bei mir so oder bei euch auch?
Freue mich auf hilfreiche Antworten ;)
Mit freundlichen Grüßen,
BlackSoulzZz
|
Battlefield lädt und lädt und lädt
08/08/2012 - Battlefield - 4 Replies
Hi Leute,
immer wenn ich online zocken will, brauch ich ewigkeiten um auf den Server zu kommen. Als Beispiel, wenn ich auf operation metro rush join, sind immer schon die ersten 2 funktstationen platt wenn ich drin bin.
Mein PC:
Prozessor AMD Athlon(tm) II X4 640 Processor, 3013 MHz, 4 Kern(e), 4 logische(r) Prozessor(en)
Installierter physikalischer Speicher (RAM) 4,00 GB
Grafikkarte: AMD Radeon HD 6870
Spiele auf Hoch, läuft auch total flüssig, lädt halt nur ewig :D Wenn ich es...
|
BF3 Beta lädt und lädt und lädt...
10/03/2011 - Battlefield - 4 Replies
Hey!
ich lad mir grade BF3 runter und jetz hat er schon 4,1 GB von 3,9?!?
es steht da dass er 100 Prozent hat und 0:00 Restzeit benötigt, aber es lädt seit 30 mins immer noch weiter :/
WV Gb hat das denn bei euch? Vll is es ja nur ein Bug bei mir? :/
|
All times are GMT +1. The time now is 15:21.
|
|
