Include CSS file not working (Using Node.js & Express)


#1

This is a novice question (my 3rd program), sorry;

I am using node.js and express; executable is file app.js
Including a link to a CSS file (< link rel=“stylesheet” href=“app.css”>) in the template ejs files is not always executed
For example:
1- the route to home.ejs (very simple) displays correctly (red text on yellow background);
2- the route to book.ejs (which evaluates req and passes a variable) executes twice and does not display styling (black text on white background).
Any idea why?
Thank you very much.

Please see included code:
---- FILE: app.js ------------------

var express = require("express");
var app = express();

app.use(express.static("public"));

app.get("/", function(req,res){
    console.log("home..");
    res.render("home.ejs");
});

app.get("/book/:item", function(req,res){
    console.log("book..");      // this executed twice
    var item = req.params.item;
    res.render("book.ejs", {itemVar: item} );
});

app.get("*", function(req,res){
    res.send("Error: No such page!");
});

app.listen(process.env.PORT,process.env.IP, function() {
    console.log("Server running!");
});

---- FILE: book.ejs --------------------

< link rel="stylesheet" href="app.css">  // this does not work

// explicit style-ing does work
<!--<style>-->
<!--    body{color:red; background:yellow;}-->
<!--</style>-->

<p>This is the BOOK page</p>
<p> This is <%= itemVar.toUpperCase() %> book.</p>

---- FILE: home.ejs ----------------------

< link rel="stylesheet" href="app.css"> // this does work

<p>This is the HOME page</p>
<p>No book specified</p>

#2

Hi there, I’ve had the exact same problem: my stylesheet only affected one view file out of three. Thanks to an amazing developer (I’m not sure whether I’m allowed to mention his name; I haven’t read the community guidelines yet).

SOLUTION: add a forward slash just before the app.css file, as in:

< link rel="stylesheet" href="/app.css">

hope works for you as it did for me


#3

Exactly, and if you are wondering why this works, I believe I know. In HTML, the forward slash means domain plus whatever it is (in other words, domain/app.css if you use /app.css). When you use app.css without the /, it simply appends it to the URL, which works for the homepage (/ and app.css becomes /app.css), but not for the other page (/book/item/ plus app.js is /book/item/app.js, which is definitely not where your CSS file is located).


#4

Thanks everybody for helping.
I was following ad-litteram the instructions found in a bootcamp video; then I figured out how to solve the issue, but I failed to explain what happened and close this issue. Sorry for that.

Thanks again.
Best
M.


#5

Your solution works, Thanks !