How to use css in Nodejs-Express project


For using Cascade Style Sheet in Nodejs-Express app make sure the following is done

  1. Create assets folder
  2. place the style sheet inside the folder

Express and the static

In order to use the style sheet with ejs views ( which is a templating system for Express app. Every ejs template is similar to HTML file except optionally it can avoid the tag ( <,>) operator and it carries a .ejs extension), declare the middle ware as follows

app.use('/assets',express.static(assets))

In Ejs template

in a ejs Template we can use the css as follows

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <title>Minimal Blog Engine</title>
       <meta name="description" content="">
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <link rel="stylesheet" href="/assets/style.css">
       
   </head>
   <body>
   <h1>EJS Template</H1>
   </body>
</html>

and it will work.

These EJS posts may also help you

Published by

Manoj

A developer,teacher and a blogger obsessed with Python,Dart and open source world from India

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.