CSS doesn't work with jade

Question

I've set up an app with node.js and jade.

This is my view:

html
    head
        title My test page

        link(rel='stylehseet', link='/css/main.css')
    body
        h1 My Jade template
        p= message

        a(href='/about') About

The problem is the link tag. It doesn't load the css. It works if I change it to <link rel="stylesheet href="/css/main.css" /> (swapping out the jade for regular css).

This is how I serve and route index.html:

app.use(express.static(__dirname));

app.get('/', function(req, res) {
    res.locals.message = 'Hello!';
    res.render('index');
});

Answer 1

Maybe it's just a typo but you have stylehseet :

link(rel='stylehseet', link='/css/main.css')

instead of stylesheet

link(rel='stylesheet', href='/css/main.css')

Answer 2

I was stuck on this for a good few hours. The above solution worked for others but not myself.

If you or anyone else is having trouble, try this:

| <style type="text/css">
include ../css/bootstrap.min.css
include ../css/landing-page.css
include ../font-awesome/css/font-awesome.min.css
| </style>

You can always remove includes if you don't need them, but the style tag is what allowed my css to reflect (keep in mind my file structure is a 'views' folder with all my jade views, and a separate 'css' file which is in the same directory where the 'views' folder is).

Hope this helps!