Tengo un problema en el que no puedo cargar mi CSS en una vista que se procesa desde un enrutador. El CSS se carga bien para una vista renderizada desde app.js en la raíz del directorio del proyecto

Aquí está mi estructura de directorios,

 node_modules/ public/ styles/ form.css home.css routes/ form.js product.js views/ index.ejs savoury.ejs app.js package.json

Aquí está mi app.js :

 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}`) });

El problema surge, al menos que yo sepa, cuando trato de mostrar una vista desde un enrutador llamado formRouter que está definido en mi directorio de routes como,

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

La vista de savoury vincula la hoja de estilo de esta manera:

 <link rel="stylesheet" href="styles/form.css">

Luego recibo el siguiente error en la consola del navegador: 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.

No sé cuál es el problema. Cualquier ayuda es apreciada.