The challenge of incorporating multiple stylesheets into an express/node/ejs application: encountering the error "Undefined style."

Question

The challenge of incorporating multiple stylesheets into an express/node/ejs application: encountering the error "Undefined style."

I am working on a project using express, node, and ejs and I want to be able to use different stylesheets for different views. In order to render a specific view with its corresponding style, I have included the following in my app.js file:

app.get('/mySite', (req, res) => {
res.render('mySite', { style: 'mySite' });

In this case, let's assume I have created a stylesheet named mySite.css and in my boilerplate.ejs file, I have added a link to the desired styles:

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

The challenge I am facing is how do I define 'style' without encountering an error saying "style is not defined"?

I apologize if this question pertains to basic knowledge in express, as I am still in the learning process.

css node.js express ejs

Answer 1

Answer №1

When I was learning, I found success using a similar method by creating an object in my controller.js file with the names of the stylesheets.

const styles = {
  index: "styles",
  register: "register",
  login: "login",
};

I simply added the style attribute when rendering each page:

const mainController = {
  index: (req, res) => {
    res.render("./products/index", {
      showRoom: productCollection,
      style: styles.index,
    });
  },
  register: (req, res) => {
    res.render("./users/register", {
      style: styles.register,
    });
  },
  login: (req, res) => {
    res.render("./users/login", {
      style: styles.login,
    });
  },
};

This way, when rendering index, register, etc., it calls for the name of the stylesheet to complete the href in the HTML:

  <!-- APPLIES EACH SPECIFIC STYLESHEET TO EACH SITE -->
  <link rel="stylesheet" href="/styles/<%= style %>.css" />
  <!-- ------------------------------------------------- -->

Answer 2

When I was learning, I found success using a similar method by creating an object in my controller.js file with the names of the stylesheets.

const styles = {
  index: "styles",
  register: "register",
  login: "login",
};

I simply added the style attribute when rendering each page:

const mainController = {
  index: (req, res) => {
    res.render("./products/index", {
      showRoom: productCollection,
      style: styles.index,
    });
  },
  register: (req, res) => {
    res.render("./users/register", {
      style: styles.register,
    });
  },
  login: (req, res) => {
    res.render("./users/login", {
      style: styles.login,
    });
  },
};

This way, when rendering index, register, etc., it calls for the name of the stylesheet to complete the href in the HTML:

  <!-- APPLIES EACH SPECIFIC STYLESHEET TO EACH SITE -->
  <link rel="stylesheet" href="/styles/<%= style %>.css" />
  <!-- ------------------------------------------------- -->

Answer 3

Answer №2

Alright, I've discovered that styling can be achieved by referencing the appropriate route, but in the boilerplate code, an ejs syntax is required for styling references.

Answer 4

Alright, I've discovered that styling can be achieved by referencing the appropriate route, but in the boilerplate code, an ejs syntax is required for styling references.

The challenge of incorporating multiple stylesheets into an express/node/ejs application: encountering the error "Undefined style."

Answer №1

Answer №2

Similar questions

Troubleshooting: Azure Functions with NodeJS fails to implement Hot Reload functionality

Step-by-step guide on mocking an asynchronous function in nodejs with jest

Adjusting table font dynamically using Angular and CSS

"Exploring the compatibility between Android browsers and Socket.IO technology

Separate Camunda from the user interface

Struggling with color styling within link_to tags in Rails 4 - having trouble getting inline styling to show up correctly

How can I design unique navigation menus using HTML, CSS, JavaScript, and jQuery?

Adjust the size of a div while maintaining its aspect ratio based on the width and height of its parent element using CSS

Creating Dynamic Web Design: Horizontal Scrolling Window and Adaptive HTML Content

What is the best way to upgrade npm on a Windows operating system?

Node.js is not supported by npm

browsing through a timeline created using HTML and CSS

What causes Angular to consistently redirect to the homepage?

Utilize ng-bootstrap in an Angular CLI project by integrating it with npm commands

Searching for the precise error name being thrown in MySQL using Node.js

Adjust text alignment of SVG elements using CSS

The access to Angular.js has been denied with a 403 Forbidden error

removing spaces in mongodb aggregation function

Is it possible to change the file name of vendors.js using webpack?

How to center align an input vertically with Bootstrap 3