How to link css to html in an express project?

Question

I have an Express.js project wich looks like this:

In routes/index.js I can display my html file like this:

app.get('/', function(req, res) {
  res.sendFile(path.join(__dirname + '/../views/authentication.html'));
});

But the file is displayed without its style contained in authentication.css. However, authentication.css is linked to authentication.html :

<head>
    <meta charset="utf-8">
    <link rel = "stylesheet" href = "authentication.css">
</head>

I tried to move my .css to the public/stylesheets folder and change the <link> tag to point to the new location but it didn't worked.

What am I supposed to do to apply my css files to the corresponding html files?

score 1 · Accepted Answer · edited May 23 '17 at 10:34

1

So I found some sort of solution thanks to this post : https://stackoverflow.com/a/17911882/5016201 .

I just added this line in app.js:

app.use(express.static(__dirname + 'views'));

It displays my html + css files correctly, I don't know if it is a good practice but it is good enough for what I am doing.

edited May 23 '17 at 10:34

Community

answered Jun 03 '16 at 10:08

aurelienC

score 0 · Answer 2 · answered Jun 03 '16 at 09:47

Not sure if this will work but try using: =

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

try not using whitespace.

u can also try going to the route first (based on the list above)

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

When it is being run it might be using the JS as the default directory so if the first answer dont work use second

let me know if it works :D

2 Answers2