CODEWITHSUNDEEP
javascripthtmlcssnode.jspug
redixhumayun
redixhumayun

Reputation: 1864

How to link CSS and Jade?

Server.js file code given below

var express = require('express');

var app = express();

var PORT = 8080;

app.set('views', './public/views');

app.set('view engine', 'jade');

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

app.get('/', function(req, res){
   res.render('index.jade'); 
});

app.listen(PORT, function(){
    console.log('Express listening on port: '+PORT);
});

Index.jade file provided below

html
    head
        title Upload file for shortening
        link(rel='stylesheet', href='/stylesheets/style.css')
    body
        h1 Welcome to file metadata service
        div(id="submit-button")
            form(action = '/submit')
                button(type="submit", value='Submit')

style.css file provided below

#submit-button{
    height:100px;
}

h1{
    font-family:Impact;
}

I have created a public folder in my root directory, and then a views folder. Inside the views folder is where the index.jade file is saved, and inside of another folder inside the views folder, called the stylesheets folder is where the CSS file is saved.

However, any time I try to run my app, it fails to load the CSS file. Why is this happening?

Upvotes: 0

Views: 3054

Answers (2)

Guda uma shanker
Guda uma shanker

Reputation: 182

I think this will be too late to answer; I faced the same issue and was able to resolve using style.

doctype html
html
  head
    title= title
    style
        include ../stylesheets/style.css
  body
    block content

Upvotes: 0

abdulbari
abdulbari

Reputation: 6242

Put this line in layout.jade file if exists link(rel='stylesheet', href='/stylesheets/style.css')

and import layout.jade in your HTML file with this line at top of the page extends layout

here layout.jade file..

doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    block content

Upvotes: 1

Related Questions