As I delve into creating a personal project centered around a basic expense tracker web app, I encountered an obstacle right at the start of my journey. The main page's stylesheet (index.html) refuses to load, resulting in the common error message: The stylesheet http://localhost:8000/css/main.css/ was not loaded because its MIME type, “text/html”, is not “text/css”. It’s worth noting that static resources within the public/ folder are being successfully transmitted, as evidenced by the presence of my assets/ items on the page. Below is the snippet inside my index.js file:
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}`));
<head>
<meta charset="UTF-8"/>
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tracker App</title>
<link rel="stylesheet" href="/css/main.css" type="text/css">
<script src="https://kit.fontawesome.com/6b07dad4d6.js" crossorigin="anonymous"></script>
</head>
Folder structure of the app:
- node_modules/
- src/
- public/
- assets/
- css/
- main.css - scss/
- main.scss
- index.js
- public/
I would greatly appreciate any assistance! 🙏
While I’ve looked through numerous articles and Stack Overflow posts addressing similar issues, none of the solutions seem to resolve my problem.