Using EJS Tags within an external CSS file

I have been working on refactoring a Node.js project, and I currently have my CSS code within my .ejs file. I need to incorporate some dynamic data into my CSS file. It works fine when the CSS is within the EJS file.

However, when I move my CSS to an external file, nothing seems to happen!

So, I am wondering how I can inject ejs tags into my external stylesheet file?

Answer №1

Have you ever wondered why you are looking for a solution without providing the problem? It seems like you may be overcomplicating things by wanting to use a templating system when a CSS preprocessor like Sass or Less could do the trick. In fact, Less can work well on both the client and server side. Take a look at

If your heart is set on using an HTML-based templating system to generate CSS, there are some factors to consider. Your CSS templates should be stored alongside your HTML templates, not with your static assets. Additionally, your server needs to correctly serve the generated CSS with the appropriate MIME type, and your HTML must reference the styles using a URL that generates the CSS on each request rather than serving it directly from disk.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Mongodb Casting Error: The URL is incorrectly being sent to _id. What is the proper method to retrieve the ID from the request?

I've scoured through Google and StackOverflow, but I couldn't find a solution that fits my specific issue despite the error being well-documented. Here is the endpoint in question: router.get('/posts/me', authController.isLoggedIn, ca ...

Different styles of Unicode arrowheads found on different versions of Android devices

Here is the HTML/CSS code I'm using to create a "Play" button with an arrowhead symbol. The code utilizes ▶ and &9658; to achieve this functionality. <div class='audio-container'> <p style="text-indent:0em;"> <aud ...

How can I achieve the equivalent of nodejs setTimeout in Golang?

Currently immersed in my studies, I find myself missing the setTimeout function from Nodejs while working with Golang. Although I haven't delved deeply into it yet, I am curious if there is a way to replicate this functionality in Golang using an inte ...

Containerizing Node-inspector with docker-compose for efficient debugging

I have been working on integrating docker-compose and node-inspector, and I believe I am getting close to making it work smoothly. However, I would greatly appreciate it if someone could share their setup for the docker-compose file along with a detailed e ...

What is causing the net::ERR_CONNECTION_RESET in Node JS and ExpressJS?

Our application, built on ExpressJS and NodeJS, is hosted on a Linode server and served at port 3000. Although the app has been functioning well for a year, we have recently encountered consistent connection errors. The errors vary, but they are mostly re ...

Tips for successfully passing an image using props in Vuejs without experiencing the issue of disappearing content when there is no image present

Is there a way to make a component that can function with or without an image? Currently, when the component doesn't have an image, other contents and styles disappear. How can I resolve this issue? App.Vue: <template> <div id="app&qu ...

acquire the JWToken using Cypress and establish it as the header for subsequent requests

While attempting to test an Express web application I developed, the first step is authentication to retrieve a JWT token. The token retrieval process works fine, but when trying to set the header for subsequent requests, it doesn't seem to work. Thi ...

What is causing all three boxes to shift when I'm attempting to move just one of them?

Seeking assistance with a problem I'm encountering. As I work on creating my website, I've run into an issue where trying to move one of the three individual boxes (as shown in the image) causes all three of them to shift together. You can view t ...

How to Resolve ENOENT ERROR When Using fs.unlink in an Express.js Simple Application?

Currently, I am developing a basic blog using express.js. For managing the posts, I have opted for Typicode/lowdb as my database. The posts are created, updated, and deleted based on unique IDs stored in a data.json file. Additionally, I utilize the slug d ...

No results were returned when querying MySQL with Node.js

I am currently facing an issue with retrieving query results from a MySQL database in Node.js. The 'results.affectedRows' always returns undefined for me. I am using a Mac operating system. If anyone could help me solve this problem, I would grea ...

iOS exhibits a flashy display of Material Select lighting up

In my attempt to develop a website using Material Design, I encountered an issue with the Material Select component. Whether I utilize MDB (Material Design for Bootstrap) or the Materialize CSS framework, both function well on Windows/OSX/Android devices. ...

What is the best way to access the display property of a DOM element?

<html> <style type="text/css"> a { display: none; } </style> <body> <p id="p"> a paragraph </p> <a href="http://www.google.com" id="a">google</a> &l ...

Encountered a node-pre-gyp error while attempting to install via npm

Encountered an issue while attempting to install sqlite with the following setup: npm version: 6.4.1 node version: 8.11.4 Operating system: Windows 10 Various troubleshooting steps were taken including clearing cache, reinstallation of nodejs/npm, and t ...

When webpack transitions to production mode, the occurrence of undefined .env variables becomes apparent

I'm currently using the dot-env NPM package to pass simple variables to my webpack/express application. However, when I switch to PRODUCTION mode in webpack, all the variables from .env end up becoming undefined. As of now, I have set up separate de ...

Issues with cascading style sheet navigation designs

Working on this project is new to me and I am encountering a challenge with two issues. My goal is to create a menu display similar to the image shown here: The problem lies in my inability to underline the selected option and make the menu display horiz ...

I am facing difficulties in retrieving data from MongoDB using Angular 8

Having trouble loading data from MongoDB using Angular 8? I've successfully loaded data with https://jsonplaceholder.typicode.com/, but when trying locally at 'http://localhost:3000/employees', it doesn't work. I can post data but una ...

Concluding the dialogue once the post request has been successfully processed

My tech stack includes React, Redux, NodeJS, and ExpressJS. For the front-end, I'm utilizing material-ui. Within my application, I have implemented a dialog that allows users to input information and sign up. Upon clicking submit, a POST request is in ...

Fixed Container housing a Child Div with Scrollbar

I am faced with a challenge involving a lengthy navigation menu (.nav-main) nested within a fixed header (header). When the navigation menu is toggled using jQuery .toggle(), the content extends beyond the window height and does not scroll. I am looking fo ...

Blurry text can be a common occurrence when applying the transform(-50%,-50%) function to center

I have found a way to center a section using the following code: <div class="clock-section"> <h5 id="clock-title">We will be arriving soon</h5> <hr class="hr" id="cdhr"> </div> Here is ...

Encountering an error when trying to install a package from GitHub using NPM within a

I recently attempted to install a project from a github repository and integrate it within my own. I utilized the command npm install github:openfn/core#v1.0.0 in my project directory, which added "core": "github:openfn/core#v1.0.0" to ...