I am encountering an issue where I am unable to load my CSS into a view that is being rendered from a Router. The CSS loads perfectly fine for a view rendered from app.js at the root of the project directory.
Below is my current directory structure,
node_modules/
public/
styles/
form.css
home.css
routes/
form.js
product.js
views/
index.ejs
savoury.ejs
app.js
package.json
This is how my app.js looks like:
import express from 'express';
import path from 'path';
import productRouter from './routes/product.js';
import formRouter from './routes/form.js';
import dotenv from 'dotenv';
dotenv.config();
const port = process.env.PORT || 3030;
const __dirname = path.resolve();
const app = express();
app.use(express.urlencoded({ extended: true })); // access request body for POST
app.use(express.json()); // process JSON in request body
app.use(express.static(path.join(__dirname,'public'))); // Look up our static files
app.set('view engine','ejs');
// Mount our routers
app.use('/product',productRouter);
app.use('/form',formRouter);
app.get('/',(req,res) => {
res.render('index');
})
app.listen(port, () => { console.log(`Server running on port ${port}`) });
The issue seems to arise when I attempt to render a view from a Router named formRouter which is defined in my routes directory as shown below,
import express from 'express';
// Serve our forms from this router
const formRouter = express.Router();
// Render our add savoury form from here
formRouter.get('/add/savoury',(req,res) => {
res.render('savoury');
});
The view for savoury references the stylesheet in this way:
<link rel="stylesheet" href="styles/form.css">
Upon checking the browser console, I see the following error message:
Refused to apply style from 'http://localhost:3030/form/add/styles/form.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.I'm unsure of what could be causing this issue. Any assistance or insights would be greatly appreciated.