Pug file not loading CSS

Question

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

Solution 1

Typo in your link to bootstrap, you have boostrap:

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

Solution 2

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

html
    head
        style
             include ./style.css
    body

Solution 3

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