Stylesheet wurde wegen falscher MIME -Typ nicht geladen (Text/HTML anstelle von Text/CSS) ⇐ CSS

[Anonymous]

Ich entwickle derzeit ein persönliches Projekt, das aus einer einfachen Spesen -Tracker -Web -App besteht. Ich habe Node.js mit Express für mein Backend ausgewählt, aber ich bin zu Beginn meiner Reise festgefahren, weil das Stylesheet für die Hauptseite (index.html) nicht laden möchte. Ich erhalte den berühmten Fehler: Das Stylesheet http: // localhost: 8000/css/main.css/wurde nicht geladen, weil sein MIME -Typ, „Text/HTML“, nicht „Text/CSS“ ist. > Ich möchte erwähnen, dass statische Ressourcen in der Öffentlichkeit/ im Ordner gesendet werden. Zum Beispiel sehe ich meine Vermögenswerte/ Elemente auf der Seite. />

Code: Select all

import express from 'express';
import dotenv from 'dotenv';
import bodyParser from 'body-parser';
import { dirname } from 'path';
import { fileURLToPath } from 'url';
import path from 'path';

dotenv.config();

import { compileSassAndSaveMultiple } from 'compile-sass';

const PORT = process.env.PORT || 3000;

const app = express();

const __dirname = dirname(fileURLToPath(import.meta.url));

app.use('/', express.static(path.join(__dirname, 'public'))); // for delivering static resources
app.use(bodyParser.urlencoded({ extended: false })); // for working with forms
app.use(express.json()); // for parsing json data

await compileSassAndSaveMultiple({
sassPath: path.join(__dirname, 'public/scss/'),
cssPath: path.join(__dirname, 'public/css/'),
files: ['main.scss'],
});

app.use('/', (req, res, next) => {
res.sendFile(path.join(__dirname, 'views/index.html'));
});

app.listen(PORT, () => console.log(`Listening on port: ${PORT}`));

< /code>
von HTML -Datei, die gesendet wird:


[*]

Tracker App

und die App -Ordnerstruktur:

node_modules/
[*] src/

public /

Assets /< /li>
CSS /
< ul>
main.css
- scss /< /li>
main.scss
< /ul>
< /li>
< /ul>
< /li>
< /ul>

[*]Index.js
< /ul>
< /li>
< /ul>
Jede Hilfe wäre geschätzt!
Ich habe viele Artikel und Stackoverflow -Beiträge übersehen, die sich einem ähnlichen Problem nähern, aber keine der Lösungen hat funktioniert.