Can’t load CSS into express view using a router

I am running into a problem where I cannot load my CSS into a view that gets rendered from a Router. The CSS loads fine for a view rendered from app.js in the root of the project directory

Here is my directory structure,

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

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

The problem arises, at least to my knowledge, when I try to render a view from a Router called formRouter which is defined in my routes directory as,

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 links the stylesheet like this:

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

I then get the following error in the browser console: 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 don’t know what the problem is. Any help is appreciated.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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.

So you receiving that error message cause you trying to style the html using a 404 message

But Why are you receiving a 404 error ?

You are receiving a 404 error due to the route or path you calling

if you look closely you can see ‘http://localhost:3030/form/add/styles/form.css’ is the path it trying to request the css which don’t exist

Now in your file path you got

public/
    styles/
        form.css
        home.css

which mean the path you should be calling is

https://localhost:3030/styles/form.css

not http://localhost:3030/form/add/styles/form.css

So to get rid of the error use
edit your html to

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

The slash in front of the styles means its calling from the root dir

but omitting it or using ./styles means its from that route folder

If this answer your question remember to mark it answered

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0