css not loading property using express .ejs nodejs

Question

Good evening everyone,

I would appreciate any help.

I got these two routes:

app.get('/', function(req,res){

        res.render('index');
});

app.get('/registration/add', function(req,res){

        res.render('clientRegistration');
});

and this is part of the server:

app.use( express.static(path.join( __dirname, './client/static/')));
app.use(body_parser.urlencoded());
app.set( "views", path.join(__dirname, "./client/views/"));
app.set( "view engine", 'ejs');

Directory is:

MyApp/
    client/
        static/
            registration.css
            styles.css
        views/
            index.ejs
            clientRegistration.ejs

On my index.ejs, I have: link rel="stylesheet" type="text/css" href="styles.css" which loads the .css file perfectly. But when I click the link: a href="/registration/add"> on index.ejs, it takes me to the clientRegistration.ejs page but the registration.css does not load even though I have: link rel="stylesheet" type="text/css" href="registration.css"

What am I doing wrong?

Thanks for your time.

kaxi1993 · Accepted Answer · 2017-03-29 07:54:06Z

5

Maybe missing / is a problem

<link rel="stylesheet" type="text/css" href="/registration.css">

answered Mar 29, 2017 at 7:54

kaxi1993

4,7104 gold badges32 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user2419831 Over a year ago

It works. Thank you so much. I have the href="styles.css" working perfectly without the "/" , but the href="registration.css" was not working without it.

kaxi1993 Over a year ago

In first situation it worked because you were on / route but in second situation it searched file in` /registration/add/registration.css` route instead of /registration.css. This happens when you forgot to add slash before href

n1kkou · Accepted Answer · 2017-03-29 07:55:17Z

1

Try to add a forward slash before your style.css href. As it seems to me, everything is setup correctly and it might be only a problem with the current folder reference.

answered Mar 29, 2017 at 7:55

n1kkou

3,1402 gold badges25 silver badges34 bronze badges

Collectives™ on Stack Overflow

css not loading property using express .ejs nodejs

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related