how to use css in jade?

Question

at last, i find it case by that express can not find the local css file.

then i fix in my code.

i use the link word as told, but still can not see the css file invoke successful.

app.js

  var
    express = require('express')
  , cons = require('consolidate')
  , jade = require('jade')
  , path = require('path')

var app = express()

app.engine('jade', cons.jade)
app.use('/views',express.static(__dirname + '/views'))
app.use("/styles", express.static(__dirname + '/styles'));
app.set('view engine', 'jade')

app.use(function (req, res) {
  res.render('layout')
})

app.listen(3000);

/views/layout.jade

html
    link(rel='stylesheet', href='../styles/word.css', type='text/css')
head
  body
    p#para1 Just test css in jade.

/styles/word.css

p
{
text-align:center;
color:red;
}

it seems to be a silly problem, and i post too much code in the question, so thanks for reading at all

Have you checked Network Manager in Google Chrome or similar, to ensure the file is actually found? — whirlwin, May 26 '14 at 12:27
Is it a typo, or do you try to load test.css while your css is in word.css ? — Vinky, May 26 '14 at 12:38
Possible duplicate http://stackoverflow.com/questions/7956038/jade-template-engine-loading-css-file — Alex Char, May 27 '14 at 08:24
Possible ditch the relative require and define the href like soooo `href='/styles/word.css'` — grobot, May 30 '14 at 03:56

score 0 · Answer 1 · answered Jun 01 '14 at 03:33

0

try starting the server, run the page, right click view source and click on your css link to see if it is actually linked to your page correctly.

if its not probably like what @grobot said it might be the directory problem.

answered Jun 01 '14 at 03:33

Jason

122
1
5

how to use css in jade?

then i fix in my code.

1 Answers1