Link to static files from Jade template rendered from a sub route

Question

I have a very basic problem with Node.js/Express/Jade that\'s surprisingly hard to describe. In my node.js application I use the Express framework for routing of HTTP requests.

Answer 1

I am guessing that your Jade template has something that looks like the following:

doctype html
  head
    link(rel="stylesheet", type="text/css", href="css/style.css")
    ...

The href for the stylesheet is a relative path, meaning your browser will look for the CSS file relative to the page it is currently on. For example:

• http://example.com/about → http://example.com/css/style.css
• http://example.com/about/company → http://example.com/about/css/style.css

You can change the href to an absolute path so the CSS file location will always be constant no matter what sub-directory you are in:

link(rel="stylesheet", type="text/css", href="/css/style.css")

The key change here is the forward slash at the beginning of the href, turning the relative path into an absolute one.