I have a CSS file located in the public directory and two EJS templates in the views directory.
The CSS file works fine when using this route:
app.get('/theresa', (req, res) => {
res.render('templates/home')
})
However, when I created a new route and attempted to style it, the CSS did not work, resulting in the following error message:
"Refused to apply style from 'http://localhost:3000/theresa/css/homePage.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled."
This is the problematic route where the CSS fails to load:
app.get('/theresa/overview', (req, res) => {
res.render('templates/overview')
})
<link rel="stylesheet" href="css/homePage.css">
const express = require('express')
const path = require('path')
const ejsMate = require('ejs-mate');
const methodOverride = require('method-override');
const app = express();
app.engine('ejs', ejsMate)
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'))
app.use(express.urlencoded({ extended: true }));
app.use(methodOverride('_method'));
app.use(express.static(path.join(__dirname, '/public/')))
app.get('/theresa', (req, res) => {
res.render('templates/home')
})
app.get('/theresa/overview', (req, res) => {
res.render('templates/overview')
})
app.listen(3000, () => {
console.log('Serving on port 3000')
})