2

I'm using pugjs for my project.I was unable to load a css file in the pug template. I'm using the following code

index.pug

link(rel="stylesheet", href="views/styles/products.css", type="text/css")

This is my project structure

Community
  • 1
  • 1
Karthik Sankar
  • 71
  • 2
  • 9
  • That's the right syntax, make sure the path is right. – Paul Oct 20 '17 at 13:43
  • Mr.Paul can u please verify my project structure and tell its right or wrong – Karthik Sankar Oct 20 '17 at 13:51
  • 3
    I think you don't tell to your node.js app folder `/views` serving "static" files. I recommand you to add a folder `/public`, place all your static files here and tell in your server.js this folder serving static file. – Zagonine Oct 20 '17 at 14:02

2 Answers2

2

Express is not going to serve anything that you don't give permission to. You have to give permission by using express.static middleware.

Put your Static files in a folder then use the express.static middleware like this-

app.use(express.static(path.join(__dirname, 'public')));

For more details refer to https://expressjs.com/en/starter/static-files.html

vibhor1997a
  • 2,336
  • 2
  • 17
  • 37
1

My directory setup looks something like this:

    .
├── app.js
├── bin
│   └── www
├── package.json
├── package-lock.json
├── public
│   ├── images
│   ├── css
│   │   └── style.css
├── routes
│   ├── index.js
│   └── users.js
└── views
    ├── error.pug
    ├── index.pug

And in the index.pug, we have to use:

 html
      head
        title=homepage
        link(rel='stylesheet', href='/views/dashboard/dashboard.css')
      body

And in app.js add this line of code:

app.use(express.static(path.join(__dirname, 'public')));
the_haystacker
  • 1,585
  • 18
  • 20