I am new to using express and node.js.
I am trying to develop my app, but for some reason, my style.css file is not being recognized and I am unsure why.
Initially, I attempted to use .scss files, but after researching, I discovered that it was not possible.
Therefore, I converted my style.scss file to style.css, but when I run my app, the styles are still not applied. In the inspector, I see the following message:
localhost/:1 Refused to apply style from 'http://localhost:3000/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
When I click on the link 'http://localhost:3000/style.css', I receive the following message in the tab:
Cannot GET /style.css
Here is my code in index.js :
const express = require('express');
const {engine} = require('express-handlebars');
const app = express();
const port = 3000;
app.engine('handlebars', engine({
layoutsDir:__dirname + '/views/layouts',
}));
app.set('view engine','handlebars');
app.get('/', (req,res) => {
res.render('main', {layout : 'index'})
});
app.use(express.static('public'));
app.listen(port, () =>
console.log(`Our app is running at : http://localhost:${port}`)
);
In my index.handlebars file, I have the following line:
<link rel="stylesheet" type="text/css" href="./style.css">
When I ctrl+click on "style.css", I can locate the correct css file.
Can anyone offer assistance?