'CSS doesn't apply on EJS templates where the GET route path's stacks

I have a CSS file in a public directory and 2 EJS templates in views directory.

My CSS file works when i use this route:

app.get('/theresa', (req, res) => {
    res.render('templates/home')
})

But when i was creating a new route and tried to style it, it didn't work => It gives me this 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 route where the CSS doesn't work:

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')
})


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source