How to get different css files for different routes (express, node.js)

Question

I have such a directory content

app\
  app.js
html-views\
  corporate\
    css\main.css            //css.corp
    index.html
  ecommerce\
    css\main.css            //css.ecom
    index.html

I`m trying to config two routes:

var sys = require( "sys" );
var express = require("express");
var cons = require("consolidate");
var app = express();
app.engine("html",cons.swig);
app.set("view engine","html");
app.set("views","../html-views/");

//HERE I HAVE TO CONFIGURE CSS

app.get("/corporate",function(request,response){
response.render("corporate/index");
});
app.get("/ecommerce",function(request,response){
response.render("ecommerce/index");
});
app.listen(8080);

I want to configure choosing "main.css" depending to the route, but i can`t

If I write:

app.use("/css",express.static("../html-views/corporate/css"));
app.use("/css",express.static("../html-views/ecommerce/css"));

then one css will override another.

If I write:

app.get("/corporate",function(request,response){
    app.use("/css",express.static("../html-views/corporate/css"));
    response.render("corporate/index");
});

then they override each other only once.

How should I write? Thanks for your attantion.

What about prefixing your /css in the two app.use()s with /corporate and /ecommerce? No more conflicts. — Mike Causer
– Mike Causer, Commented Feb 10, 2014 at 14:42
trying to do without changing .html (where src="css/main.css") — chilicoder
– chilicoder, Commented Feb 10, 2014 at 18:53
Connect vhosts might be what you are after senchalabs.org/connect/vhost.html — Mike Causer
– Mike Causer, Commented Feb 10, 2014 at 21:18

pigfly · Accepted Answer · 2016-12-07 02:10:26Z

2

I tried to solve the same issue as following:

In the ecommerce.html,I include the css file for this template like this:

<link rel="stylesheet" href="./stylesheets/ecommerce.css">

So in this way, different routes include different css for specific template.

Hope this will you help you.

Cheers

answered Dec 7, 2016 at 2:10

pigfly

4,3782 gold badges16 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 11:53:02Z

0

Is there any reason that you don't use template engine? Handlebars with layout option can solve this easily.

I found answer here https://stackoverflow.com/a/8790999/1822805

edited May 23, 2017 at 11:53

CommunityBot

11 silver badge

answered Aug 7, 2016 at 17:03

Sang Dang

4981 gold badge11 silver badges27 bronze badges

3 Comments

chilicoder Over a year ago

For now the question is a bit outdated) I guess, your solution can work.

chilicoder Over a year ago

app.get("/corporate",function(request,response){ response.render("/index",{cssOption:'corporate'}); });

Sang Dang Over a year ago

Lol I did not check the date. Glad to know you! ;)

Collectives™ on Stack Overflow

How to get different css files for different routes (express, node.js)

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related