Can't load CSS into express view using a router-CodePudding

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.

CodePudding user response：

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