adding css file to ejs

Question

im working on node js express  with ejs and im not able to include a  css file to it i tried the same thing seperately as a html-css duo and it worked fine   how can i include the same in  my  ejs file  My app js goes thus   var express   require  express    var app   express     app set  views     dirname     views      app get      function req  res     res render  index ejs             title   My Site       nav    Home   About   Contact               app get   home   function req  res     res render  index ejs             title   My Site       nav    Home   About   Contact               app get   about   function req  res     res render  about ejs         title   About        nav    Home   About   Contact              app get   contact   function req  res     res render  contact ejs         title   Contact        nav    Home   About   Contact               app listen 3000     and the index ejs file    lt html gt   lt head gt   lt link href  style css  rel  stylesheet  type  text css  gt    lt  head gt   lt body gt   lt div gt       lt h1 gt   lt    title   gt   lt  h1 gt       lt ul gt   lt   for  var i 0  i lt nav length i       gt    lt li gt  lt a href    lt   nav i   gt   gt   lt   nav i   gt   lt  a gt  lt  li gt      amp nbsp     lt       gt      lt  ul gt   lt  div gt    lt br gt   lt h3 gt Node js lt  h3 gt   lt p class  just  gt Express is agnostic as to which templating language you use  Templating languages can be a hot topic of debate Here Iam going to use Jade  lt  p gt   lt p class   just  gt Again Express is agnostic to what you use to generate your CSS-you can use vanilla CSS but for this example I m using Stylus   lt  p gt   lt footer gt  Running on node with express and ejs  lt  footer gt   lt  home gt   lt  html gt    style css file    lt style type  text css  gt  body   background-color   D8D8D8 color   444   h1  font-weight  bold text-align  center   header   padding  50px 10px  color   fff  font-size  15px  text-align right    p   margin-bottom  20px   margin-left  20px    footer  text-decoration  overline  margin-top  300px   div   width 100   background  99CC00 position static  top 0 left 0     just        text-align  center       a link  color  FF0000         unvisited link    a visited  color  0B614B      visited link    a hover  color  B4045F        mouse over link    a active  color  0000FF      ul   list-style-type none  margin 0  padding 0 text-align  right    li   display inline     lt  style gt

User · Accepted Answer

Your problem is not actually specific to ejs.

2 things to note here

style.css is an external css file. So you dont need style tags inside that file. It should only contain the css.
In your express app, you have to mention the public directory from which you are serving the static files. Like css/js/image

it can be done by

app.use(express.static(__dirname + '/public'));

assuming you put the css files in public folder from in your app root. now you have to refer to the css files in your tamplate files, like

<link href="/css/style.css" rel="stylesheet" type="text/css">

Here i assume you have put the css file in css folder inside your public folder.

So folder structure would be

.
./app.js
./public
    /css
        /style.css

User · Answer

In order to serve up a static CSS file in express app  i e  use a css style file to style ejs  templates  files in express app    Here are the simple 3 steps that need to happen    Place your css file called  styles css  in a folder called  assets  and the assets folder in a folder called  public    Thus the relative path to the css file should be   public assets styles css  In the head of each of your ejs files you would simply call the css file  like you do in a regular html file  with a  lt link href       gt  as shown in the code below   Make sure you copy and paste the code below directly into your ejs file  lt head gt  section   lt link href    public assets styles css  rel  stylesheet  type  text css    gt   In your server js file  you need to use the app use   middleware   Note that a middleware is nothing but a term that refers to those operations or code that is run between the request and the response operations   By putting a method in middleware  that method will automatically be called everytime between the request and response methods   To serve up static files  such as a css file  in the app use   middleware there is already a function method provided by express called express static     Lastly  you also need to specify a request route that the program will respond to and serve up the files from the static folder everytime the middleware is called  Since you will be placing the css files in your public folder   In the server js file  make sure you have the following code      using app use to serve up static CSS files in public assets  folder when  public link is called in ejs files    app use   route   express static  foldername     app use   public   express static  public        After following these simple 3 steps  every time you res render  ejsfile   in your app get   methods you will automatically see the css styling being called   You can test by accessing your routes in the browser

User · Answer

app use express static   dirname     public      lt link href  quot  css style css quot  rel  quot stylesheet quot  type  quot text css quot  gt   So folder structure should be      app js   public   css   style css

User · Answer

You can use this        var fs   require  fs         var myCss              style   fs readFileSync    style css   utf8                  app get      function req  res          res render  index ejs            title   My Site          myCss  myCss                      put this on template       lt  - myCss style   gt    just build style css     lt style gt      body         background-color   D8D8D8       color   444          lt  style gt    I try this for some custom css  It works for me

[css] adding .css file to ejs

Examples related to css

Examples related to node.js

Examples related to express

Examples related to ejs