I'm in the process of creating a straightforward application, and while setting up the project, I encountered an issue. I have a basic localhost server and an HTML file to display, but upon accessing the localhost, I received this error in the console:
Refused to apply style from 'http://localhost:8080/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.I came across this answer but couldn't grasp the problem, hence, couldn't resolve mine.
The project structure looks like this:
Project
js
server.js
views
index.html
style.css
Here is the code contained in the files:
server.js:
const express = require('express');
const dotenv = require('dotenv');
const path = require('path');
dotenv.config({ path: './../config.env' });
const app = express();
app.use(express.static(__dirname + '/views'));
const port = process.env.PORT || 8080;
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, '../views', 'index.html'));
});
app.listen(port, () => {
console.log(`App running on port ${port}`);
});
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" type="text/css" href="/style.css" />
</head>
<body>
<button class="btn"></button>
</body>
</html>
style.css:
.btn {
background-color: red;
}
Expected the button to have a red background color, but faced the mentioned error instead. Any assistance would be highly appreciated!