Node + Express Usage of (npm) packages with CSS

[thebeyondr]

The Jolt I Needed

I was getting 404 resource not found a lot when trying to use robot-fontface on my express app so I'm sharing what works now in hopes that it can help someone else.

Maybe the owner can even add this to usage in docs

Remember "Static Shock"?

In your_express_server_file.js make the path to the package static:

app.use('/roboto', express.static(path.join(__dirname, '../node_modules/roboto-fontface/')));

This means you can use /roboto now in your path and it will know you mean ../node_modules/roboto-fontface/

Remember to change that node_modules path in relation to your_express_server_file.js.

Static to the Rescue!

Include that bad boy in your HTML or template engine file of your choice. Below is written in pug

link(rel='stylesheet' href='/roboto/css/roboto/roboto-fontface.css')

Note how the /roboto static path has now become handy.... NOTE. IT.

A Shocking Conclusion!

And voila!, you have a fully built Wordpress website. You can do stuff like

body {
  box-sizing: border-box;
  font-family: "Roboto", sans-serif;
 }

in your CSS now. Good for you. I hope this helps someone in a pickle. Alright, back to work.