cannot display static css files in an express jade template

Looking for a solution to the issue with the dollar answer (same problem). I have app.coffee:

pp.configure ->
  publicDir = "#{__dirname}/public"

app.set "views", viewsDir
app.set "view engine", "jade"

app.use(stylus.middleware debug: true, src: viewsDir, dest: publicDir, compile: compileMethod)
app.use(express.static(publicDir))

compileMethod = (str, path) ->
  stylus(str)
    .set('filename', path)
    .set('compress', true)


app.get "/pag",(req,res) ->
  res.render "pag",
  title: "test",

in /stylesheet/pag.jade:

...
link(rel='stylesheet', href='pag/css/bootstrap.min.css')
...

When I go to "myserver:9090/pag" the page does not load the bootstrap.min.css file. I am encountering the following error:

source :(my folder of projects)/views/pag/css/bootstrap.min.styl
dest : (my folder of projects)/public/pag/css/bootstrap.min.css
read : (my folder of projects)/views/pag/css/bootstrap.min.styl
Error: ENOENT, open '(my folder)/views/pag/css/bootstrap.min.styl'

Where did I go wrong? I might be missing something... Any suggestions?

Answer №1

To begin, if you haven't configured ExpressJS to serve static files yet, it's important to do so:

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

Next, eliminate the "public" from your stylesheet reference:

link(rel='stylesheet', href='/pag/css/bootstrap.min.css')

By defining "public" as the root directory from which static files are served, there is no need to specifically mention "public" in your reference - "public" is now the root.

Update:
What is your viewsDir set to? The Stylus middleware's source is directed towards that directory for rendering the styl files.

You have specified "public" as the destination directory - including "public" in the reference will create another public directory within public, which is not the intended outcome.

Consider rearranging the project's stylesheets structure as follows:

/stylesheets
  /pag
    /css
      bootstrap.min.styl

Then adjust your middleware configuration like this:

app.use(stylus.middleware debug:true, src:'/stylesheets', dest: publicDir, compile: compileMethod)

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

Choosing between setting a height of 100vh versus a minimum height of 100vh

In the development of my app, I noticed an interesting issue. When I set the background on the html with a height of 100vh and resize the viewport to cause vertical overflow, the background does not cover the overflowed content: html { height ...

What could be causing mobile phones to overlook my CSS media query?

My CSS includes 3 media queries that function properly when I resize the browser, but fail to work when using the responsive design tool in the inspector ("toggle device mode") and on mobile devices. Snippet of my CSS code : @media screen and (max-width: ...

Unable to successfully create an issue on Github API using a Post request

Lately, I've been struggling to send a post request to the GitHub API for a few days now, but unfortunately, I keep getting back an error message stating "bad message." Below is the code snippet we are using to make the post request via HTTPS in Node ...

The HTTP GET request was successful, however, there is no data being displayed on the screen

I am currently facing an issue with fetching data from a web server. The data is retrieved successfully as I can see the object in the console log, but it does not render in the component template. export class CountrydetailsComponent implements OnInit { ...

Is there a way to identify packages that rely on Angular versions greater than 6.x?

Currently, I am working on a project that is using Angular 5.x, and my task is to upgrade it to version 6.x. It has been almost two weeks since I started this process, struggling to understand how to handle the upgrades using NPM. Unfortunately, I have bee ...

Encountering a problem with React components displaying incorrect sizes while utilizing flexbox styling

I am creating a basic test application using NextJS/React. Take a look at the code snippet below: The content of Board.tsx file: import './Board.css'; export default function Board() { return <div className="board"> < ...

If values are not provided during an update, they will be automatically set as null in the database

I am looking to update certain keys and values in my database. Currently, I have populated fields such as firstname, lastname, and now I wish to add profile pictures, contact numbers, etc. However, when I use the update method, the fields that are already ...

Fixing TypeError: Object #<IncomingMessage> has no method 'flash' in ExpressJS version 4.2

Currently, I am utilizing ExpressJS 4.2 and PassportJS for authenticating local users. Everything seems to be working smoothly except for when attempting to display a failureFlash message. Below is my configuration setup, thank you in advance! ==== Necess ...

Vertical Image Alignment in Bootstrap 3

Looking for some help with a basic HTML structure here. I have a single row divided into two columns, each containing an image of the same size. What I need is to center one image both horizontally and vertically in each column. <div class="containe ...

What could be causing the space between float and div elements?

Could someone shed light on the reason behind the minor gap between the top navigation element and the content div underneath it in this jsfiddle? When I float the navigation list items, a slight gap appears between the top navigation element and the main ...

What is the reason behind the browser crashing when a scrollbar pseudo-class is dynamically added to an iframe?

1. Insert a new iframe into your HTML: <iframe id="iframe-box" onload=onloadcss(this) src="..." style="width: 100%; border: medium none; "></iframe> 2. Incorporate the following JavaScript code into your HTML file ...

How to store and retrieve images using the Google Drive API in a Node.js application

I am new to working with Node.js. I have been exploring how to route an incoming image from the Google Drive API without having to download it first, as that process takes too long. My goal is to send the image directly to the client once I receive it. I ...

How to eliminate the bottom border in react-native-material-dropdown

I recently integrated react-native-material-dropdown-v2 into my project using React Native. https://i.sstatic.net/aKVfi.png Is there a way to eliminate the bottom border in this material dropdown component? My React Native version is 0.62.2. ...

Issue with Bootstrap cards overlapping while searching

On my Bootstrap 4 page, I've incorporated cards that can be searched, displaying only those with matching titles. However, I am facing two main issues. Firstly, when two matching cards are on the same row, they overlap. Secondly, if a matching card is ...

What is the process for changing the output paper size to A4 in React Native (expo android)?

Using React Native to develop an Android app for billing purposes, I encountered an issue with the output paper size being 216mmX279mm instead of the standard PDF size of 210mmX297mm. Utilizing expo-print and printToFileAsync from expo, I aim to achieve a ...

Ways to properly align a navigation bar at the center of the webpage while maintaining the

Whenever I zoom in or out on my page, the homepage button loses its color and fails to expand to the right side. So, I have two main goals: 1) To center the selected area (highlighted by a red border in the image). 2) To extend the green color of the hom ...

How can I access a MySQL server hosted in a docker container from a separate container?

Running both a node.js server and a MySQL server in two separate containers. Both servers are functioning properly, but I am encountering issues when trying to connect to the database hosted on the MySQL container from my node app. To address this issue, ...

The fixed navigation bar shows a flickering effect while scrolling at a slow pace

Currently facing a challenge with our sticky navigation. Noticing a flickering issue on the second navigation (sticky nav) when users scroll down slowly. The problem seems to be specific to Chrome and Edge, as it doesn't occur on Firefox, IE11, and S ...

Postman post request failing to insert Mongoose model keys

Recently, I've been experimenting with the post method below to generate new documents. However, when I submit a post request in Postman (for example http://localhost:3000/api/posts?title=HeaderThree), a new document is indeed created, but unfortunate ...

Synchronize two div elements with JavaScript

The demonstration features two parent divs, each containing a child div! The first parent div's child div is draggable and resizable using JQueryUI. There are events for both dragEnd and resizeEnd associated with this div. The goal is to synchronize ...