Difficulty loading CSS in PugJS

I can't seem to get my dashboard.pug file to load both dashboard.css and dashboard.js, even though they are all in the same folder.

I have already set up express.static correctly for the public folder.

const publicpath=path.join(__dirname,'../public');

app.use(express.static(publicpath));

dashboard.pug-

doctype html
html
    head
        title Dashboard
        script(src='/views/dashboard/dashboard.js')
        link(rel='stylesheet', href='/views/dashboard/dashboard.css')
    body
        div .navbar
            div .navleft
                p Your notes
            div .navright
                div .dropdown
                    p Account ▼
                div .dropdowncontent
                    p Settings
                    p Logout

While dashboard.js loads successfully, dashboard.css is not loading.

folder structure
-public
 -views
  -dashboard
   -dashboard.css
   -dashboard.js
   -dashboard.pug
-server
 -server.js

No errors found

cssnode.jspug

Answer №1

I created an app similar to yours using the express application generator. The directory structure, excluding node_modules, is as follows:

.
├── app.js
├── bin
│   └── www
├── package.json
├── package-lock.json
├── public
│   ├── images
│   ├── javascripts
│   ├── stylesheets
│   │   └── style.css
│   └── views
│       └── dashboard
│           ├── dashboard.css
│           └── dashboard.js
├── routes
│   ├── index.js
│   └── users.js
└── views
    ├── error.pug
    ├── index.pug
    └── layout.pug

It's worth noting that the index.pug file is located in /views (index.pug serves a similar purpose to your dashboard.pug).

index.pug:

    html
      head
        title Dashboard
        script(src='/views/dashboard/dashboard.js')
        link(rel='stylesheet', href='/views/dashboard/dashboard.css')
      body
      p Hi!

In app.js, the express application generator includes the line:

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

The simple CSS and JS files I placed in /public/views/dashboard worked correctly when viewing the rendered index.pug page in the browser.

I hope this information proves useful.

Answer №2

The problem arose from the spaces between the class name and div elements. Strangely, there were no error messages despite the HTML rendering with classes that were not linked to CSS styles. By eliminating the spaces like so:

div .classname  -> div.classname

I was able to resolve the issue successfully.

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

Finding the console path in node.js

I'm currently developing a console application for node.js and I could use some guidance. When users install my console app using 'npm', they should be able to call it by typing 'program'. However, if the console is located at C:/U ...

javascriptnode.jsnpm

Bootstrap carousel slide animation isn't transitioning properly

I am encountering an issue with my carousel animation. I am aiming for a slide-out/slide-in effect similar to the Bootstrap website, but instead of sliding out, the old item simply disappears and the new item slides in. I have included a GIF to illustrat ...

htmlcssbootstrap-4

Can you explain to me the relationship between Node.js and Angular? Is it primarily for creating APIs or does

I've been trying to find information on Google about this, but I haven't found a satisfactory answer. Can someone explain the role of Node.js and ExpressJS in MEAN stack development? Is it similar to PHP for creating APIs that Angular will then c ...

node.jsangular

Sending data to specific clients using websockets in an Angular and Node.js application: A guide

As I delve into the world of using websocket.io in conjunction with nodejs and angular to create a one-on-one chat application, I find myself tinkering with code snippets: server.js app.io.on('connection', function(socket){ console.in ...

node.jsangularwebsocket

Apply a new CSS class to supersede any current font styling

I am facing an issue with my HTML and CSS. The HTML code I have looks like this: <div id="main" class="ui-tabs ui-widget ui-widget-content ui-corner-all"> <div id="main-top"> <select id="entity" name="entity" class="monospace" > ...

css

Can you explain the significance of "@c.us" in the context of whatsapp-web.js?

Are there any references or resources available for using "@c.us" that I can consult? Here is an example: client.on('ready', () => { console.log('Client is ready!'); // Your message. const text = "Hey John"; // Obt ...

javascriptnode.jswebwhatsapp

What is the best way to utilize variables in pug for interpolation?

I am the proud owner of a pug section#about.about .container .about__inner .about__content h3.about__title About me h2.about__bigtitle Who am I .about__text !{a ...

expresspug

Achieve equal height columns when they are stacked vertically using Bootstrap 5

Can columns be equal height when they become rows on mobile devices? <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="57353838232423253627176279677965">[email protected]</ ...

cssbootstrap-5

Utilizing icons for form-control-feedback in Bootstrap 4

I am struggling to achieve the desired display using Bootstrap 4 form-control feedback styling. The goal is to include an icon inside the input field along with an error message. My current setup includes Angular 5.2.9, Bootstrap 4, and Fontawesome icons. ...

angularcssbootstrap-4font-awesomeform-control

Execute the JS function during the first instance of window scrolling

Currently, I have implemented a typewriter effect on my website that triggers when the user scrolls to a specific section. However, I want this effect to occur only once. Unfortunately, every time the user scrolls again (in any direction), the function is ...

javascriptjquerycssfunction

Ensure that the flex item expands to occupy the vacant space left when other child elements are deleted

I am facing an issue with multiple children inside a parent container that has the CSS properties display: flex and flex-direction: column. There is a toggle button on the webpage which removes one of the children when clicked. The problem I need to solv ...

htmlcssflexbox

The asp.net masterpage is not utilizing the stylesheet

I have the code snippet below in the MasterPage.master file of my project: <%= ConfigurationManager.AppSettings("System").ToString() %> <asp:ContentPlaceHolder ID="Stylesheets" runat="server"> <link rel="Stylesheet" href="/App_Dat ...

htmlcssasp.net

Execute two tasks simultaneously in two separate workers utilizing the cluster module in node.js

I'm currently diving into clustering with NodeJS. My goal is to have two separate tasks - one handling node-sass and the other managing uglifyjs - each running on a distinct worker using cluster in NodeJS. The code I've implemented seems to be fu ...

javascriptnode.jschild-processnode-sassnode-cluster

Adjusting the array when items in the multi-select dropdown are changed (selected or unselected)

I am looking to create a multi-select dropdown in Angular where the selected values are displayed as chip tags. Users should be able to unselect a value by clicking on the 'X' sign next to the chip tag, removing it from the selection. <searcha ...

javascriptcssangulartypescriptdrop-down-menu

What is the best way to rerun a script without having to manually refresh the entire webpage?

If you visit greenb.byethost12.com, you can check out the progress I've made so far. Currently, when you click on the correct answer, it triggers document.location.reload(index.php), causing the entire page to refresh. What I aim for is to have only ...

javascriptjqueryhtmlcss

Enroll for callback and retrieve the document

Recently, I delved into the world of NodeJS and Mongo for the first time. To organize my code better, I decided to handle all the database query handlers in a separate JS file, exported as a module in another file that manages user requests. My current cha ...

node.jsmongodbloopbackjsstrongloop

Navigating to URL with Query String correctly using Express

Below is the code I currently have: app.get('/', function (req, res) { req.query.searchQuery = 'test2' res.redirect('/search'); }); app.get('/search/', function (req, res) { var searchQuery = req.query.search ...

node.jsexpressroutes

Unable to see the tokens on the connect four board when using Javascript and HTML

I'm currently developing a game of connect four using javascript, html, and css. I'm encountering an issue with the refreshGrid() function in game.js. At the moment, when I run my html file, I only see an empty board. The function is meant to ena ...

javascripthtmlcssarraysfunction

Connecting HTML POST to MongoDB using NodeJS

I am in the process of developing a blog application using Node, Express, and MongoDB. My goal is to create an HTML form that will allow users to submit new blog posts directly to the database. While I have successfully implemented GET and POST requests us ...

ajaxnode.jsmongodbpostexpress

Applying background color within an *ngFor loop

My question may not be perfectly described by the title, but here it is. In my Angular Material2 project, I have an md-toolbar where I am dynamically looping through values: <md-toolbar (click)="selectedToolbarValue(key.Name)" *ngFor="let key of array ...

cssangularangular-materialangular-material2