CODEWITHSUNDEEP
node.jsexpresspug
ptf
ptf

Reputation: 3370

CSS doesn't work with jade

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');
});

Upvotes: 0

Views: 1201

Answers (2)

abhi
abhi

Reputation: 1756

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!

Upvotes: 0

Sephy
Sephy

Reputation: 50392

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')

Upvotes: 1

Related Questions