CODEWITHSUNDEEP
javascriptcssnode.jspug
FrozenHeart
FrozenHeart

Reputation: 20764

How to use images in CSS that is used from Jade files rendered via Node.js

I have the following directory structure in one of my Node.js projects:

/web
  /views
    /css
      asc.gif
      bg.gif
      desc.gif
      tablesorter.css
    index.jade
    search.jade
  server.js

I render search.jade file from the server.js.

In the search.jade file I include the tablesortes.css file:

style
  include css/tablesorter.css

tablesorter.css looks like the following:

/* tables */
table.tablesorter thead tr .header {
    background-image: url(bg.gif);
    background-repeat: no-repeat;
    background-position: center right;
    cursor: pointer;
}
table.tablesorter thead tr .headerSortUp {
    background-image: url(asc.gif);
}
table.tablesorter thead tr .headerSortDown {
    background-image: url(desc.gif);
}

As you can see, it depends on the .gif files which is located in the same directory.

The problem is that my code doesn't see these .gif files (all other styles from the tablesorter.css file works perfectly).

The workaround that I use at this moment is the following code

app.use(express.static('views/css'));

placed in the server.js file, but I wonder is it the appropriate way to do it?

Upvotes: 0

Views: 173

Answers (1)

fregante
fregante

Reputation: 31849

Your current solution seems simple enough, but using full paths in the CSS could be an alternative.

Either you add the full path manually, or use some processor to do it for you. This could be through a pre-processor of your choice at compile time or use a custom-made Jade filter on the include (bottom of the page)

So perhaps in a code like

style
  include:fullpaths-css css/tablesorter.css

fullpaths-css would be your just-in-time processor, maybe based on postcss.

Upvotes: 1

Related Questions