1

I'm working on an HTML-based game using Node.js and I'm now working on the front end interface of it. I'm trying to link a CSS stylesheet, but I am getting a strange issue.

My folder structure is set up as follows:

C:\Users\myname\Documents\gamename, and within the gamename folder is the app.js file, and within client I have the index.html file to serve to the client. Within the client folder I also have the stylesheet, w3.css

Within the app.js I have the following line:

app.use('/client',express.static(__dirname + '/client'));

Inside index.html I have the following line:

<link rel="stylesheet" href='w3.css'>

However, when I run the server, it seems it cannot find the stylesheet. When I open the html file locally, it is able to find the CSS file.

Any ideas about how to fix this? I'm just using the link from W3schools that hosts the page, but I really need to edit and add my own parameters.

Ako
  • 1,424
  • 12
  • 18
Kevin Lauer
  • 53
  • 4

1 Answers1

1

how did you tried to import your stylesheet in the link tag ?

did you write it something like that ?

 <link rel="stylesheet" href="http://localhost:3000/client/w3.css" />

Use this in your app.js

app.use(express.static(__dirname + '/public'));

and add css like

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

dont need / before css like


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

How can I include css files using node, express, and ejs?

Dolev Dublon
  • 643
  • 1
  • 6
  • 16
  • 1
    adding this line worked: – Kevin Lauer Nov 08 '20 at 21:10
  • I just wanted to add, that if you open up the console in your browser, you'll often see which resources are missing (and more importantly, where the browser is looking for the resource...which will help you determine where the files should be. This always helps me narrow down the culprit. In this case, though, as @דולב דובלון pointed out, it looks like it was just a syntax error). – Doomd Nov 09 '20 at 07:48