Express.js with Node.js - Configuring Stylus Middleware for src and dest paths

Despite the presence of other questions about 'Stylus Middleware,' I am still struggling to understand it.

I want to compile a .styl file every time I run node app.js

var express = require('express');
var stylus = require('stylus');
var nib = require('nib');
var app = express();

app.set('view engine', 'jade');

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

app.use(stylus.middleware({
  src: __dirname + 'stylus',
  dest: __dirname + 'stylesheets',
  force: true,
  compress: true
}));

I have already created the static directory in public. Here is my folder hierarchy (I temporarily removed node_modules for simplicity)

MyApp:
-public
  - stylus
  - stylesheets
  - images
  - javascript
-views
-routes
-app.js
-package.json

With this code, whenever I run node app.js, the Stylus middleware will compile the style file in /public/stylus/style.styl and save the compiled file (css) in /public/stylesheets/style.css

Thank you all :)

Answer №1

const express = require("express");
const stylus = require("stylus");
const path = require("path");

const app = express();

app.use("/public", express.static(path.join(__dirname,"public")));

// If using stylus, use this syntax
// Stylus does not take an object as a parameter
app.use(stylus.middleware(path.join(__dirname, 'public')));

/**
express-stylus module can take an object as a parameter
app.use(expressStylus.middleware({
    src: path.join(__dirname, "public", "stylus"),
    dest: path.join(__dirname, "public", "styleSheets"),
    force: true,
    compress: true
}));
*/

app.get("", function(req, res) {
    res.render("index");
});

app.listen(app.get("port"), function() {
    console.log("Server running on http://localhost:%s", app.get("port"));
});

In my directory structure, I have: - public - style.styl - views - routes - app.js - package.json

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

Problem arising from implementing background and relative positioning in html and css

Encountering an issue with html and css. Today, attempted to create a page with a large background image for the first time. Utilizing the foundation framework, but facing a challenge. Foundation is an adaptive framework, and when resizing the browser, a ...

inherited background colors are not passed down

I am having issues with applying the background and padding in my CSS. It seems that my CSS is not overriding the Bootstrap styles, and when I apply the container style, the display property is not working as expected. Here is the code snippet: ...

NodeJS - Passing URL parameters to controller functions: A comprehensive guide

I have a route in my router file that looks like this. app.get('/:catId', categoryController.getSingleCategoryById) How can I access the catId parameter in my controller? This is my current controller code: function getSingleCategoryById(req, ...

The code attempted to use `app.set`, but received a TypeError because `app.get` is

While working with express 4.x, I encounter an issue with setting the port in my server.js file like this: var express = require('express'); var app = express(); ... var port = process.env.PORT || 8080; app.set('port', port); ... modul ...

What is the best way to customize the woocommerce.css file in the parent theme?

Currently, I have incorporated an ecommerce-friendly wordpress theme for my website in conjunction with woocommerce. To customize the design, I created a child theme and transferred the woocommerce.css file from the plugin into the css of the child theme, ...

Sending emails from Node using Mail (nodemailer/maigun-js) is not functioning correctly

Seeking to ensure complete registration confirmation, I am attempting to send a confirmation email to the user in the process of signing up. My chosen tools for mail sending are node.js along with either nodemailer or mailgun-js. During testing on localhos ...

implementing lazy loading for images within styled components

const UserBackgroundImage = styled.div` background: url(${(props) => props.backgroundImage}) no-repeat center center; } In my styling component, I have utilized a div for displaying background images. However, I am facing a flickering issue while wai ...

Using MongoDB Object as middleware in Express applications

I’m facing issues trying to access the "DB" database object that gets created when the MongoDB client module establishes a connection with my MongoDB database. Currently, I am encountering an error indicating that in data.js, 'db' is not defin ...

Finding the origin of a request in Node.js using Express.js

In my firebase functions built with nodejs, I have utilized an express app to develop a sophisticated API within a single firebase function. Here is an example of how it looks: import * as functions from 'firebase-functions'; const express = req ...

Information flows from the Bootstrap 4 template

When viewed on a mobile device, the content extends beyond the page and a horizontal scrollbar appears. You can view my page by clicking this link. <div class="custom_content col-md-12"> <div class="container"> <div class="row"> ...

"Utilize gulp-connect to store the root as an array

The gulp-connect documentation mentions that options.root can accept either an array or string. My situation involves having a build directory that I want to use as the root, along with a separate sources directory where all my source maps are located. Is ...

Excessive blank space surrounding Bootstrap typography

Despite using margin and padding set to 0, as well as adjusting the line-height, Bootstrap 4 still leaves unnecessary space around text. This issue can make aligning elements with text quite challenging. Take a look at the red line in the screenshot below ...

Develop a dynamic progress bar using jQuery

I am having trouble creating a percentage bar using jquery and css. The code I have written is not working as expected, particularly the use of jquery css({}). Here is the code snippet: *'width' : width - seems to be causing issues for me / ...

Automatically adjust sizes with div elements

How can I automatically resize this iframe within a div? My current method is not effective. <iframe src="http://www.gamepuma.com/external.html?http://data.gamepuma.com/games/06/crash-bandicoot.swf" width="600" height="400" frameborder="0" margin ...

Sending a POST request using Node.js Express: A step-by-step guide

Looking for help on sending a post request from node.js Express with data passing and retrieval. Preferably a straightforward method like cURL in PHP. Can anyone assist? ...

Executing Child Processes in Node-Webkit

Trying to run a homebrew command, like so: brew list Followed the documentation and executed it this way: child = exec('brew', function (error, stdout, stderr) { console.log(stdout); console.log(stderr); }); Encountering a "command not foun ...

When employing the base64.urlsafe_b64decode function in Python3, the data type returned is "bytes". Conversely, in NodeJS the data type returned is Buffer

Ruby decoded_token = Base64.urlsafe_decode64(encoded_token) puts decoded_token.class # this will give us value in 'String' class JavaScript var base64url = require('base64-url') var token = base64url.unescape(req.cookies.Token) // n ...

Encountering an error code ERRP004 indicating Invalid merchant details during the integration process with the Billdesk payment gateway

Whenever I try to access the billdesk UAT URL, I am encountering the following error message: Sorry we are unable to process your request right now - Invalid merchant details (ERRP004). Despite following all the steps outlined in the Billdesk documentat ...

What is the reason behind console.log() displaying an array, while typeof returning 'object'?

This question pertains to the outcome of a mongoose find() operation. After running the code console.log('apparently this is an ' + typeof campaign.advertGroups, campaign.advertGroups); The resulting output is as follows: apparently this is an ...

Utilizing the request body value within the .withMessage() function of the Express validator chain

I am looking to showcase my express validator errors with the specific value entered by the user. For instance, if a user types in an invalid username like "$@#" (using a regex that I will provide), I want to return my error message as follows : { "er ...