CODEWITHSUNDEEP
javascriptcssnode.jsexpresspug
Human Cyborg Relations
Human Cyborg Relations

Reputation: 1244

Pug file not loading CSS

I've got an express project set up. I'm using Pug as the view engine.

I've got the following lines in my app.js,

app.set('views', path.join(__dirname, './views'));
app.set('view engine', 'pug');
app.use(express.static(path.join(__dirname, './public')));

And I've got the following in my index.pug view,

    link(rel='stylesheet', href='/stylesheets/style.css', type='text/css')
    link(rel='stylesheet', href='/stylesheets/boostrap.min.css', type='text/css')

The CSS files are in the right folders (public/stylesheets), but when I load up the app, the view does not seem to load the CSS files.

The full project with its directories and all the code can be found here

Upvotes: 3

Views: 14975

Answers (4)

yaach
yaach

Reputation: 462

I had a similar issue, bootstrap file was loaded but code has not effect on any bootstrap classes. The issue was that I had a typo on the rel attribute. I had stytesheet instead of stylesheet

link(rel='stylesheet', href='/stylesheets/bootstrap.min.css')

Upvotes: 2

the_haystacker
the_haystacker

Reputation: 1625

If you are using pug 2.*, or a greater version, the code below will work

html
    head
        style
             include ./style.css
    body

Upvotes: 2

Riccardo Persiani
Riccardo Persiani

Reputation: 732

My code is working with this one

doctype html
html(lang='en')
  head
    link(rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous")

    title Jade
  body
    h1 Jade - node template engine

Upvotes: 0

worc
worc

Reputation: 3792

Typo in your link to bootstrap, you have boostrap:

link(rel='stylesheet', href='/stylesheets/boostrap.min.css', type='text/css')

Upvotes: 10

Related Questions