Custom Pug design without any CSS files added

I am having trouble with my .pug template in my express project as it is not including its stylesheets. I have referred to the pug documentation but still can't figure out the issue. Any help would be appreciated!

FILE TREE:

views
`-- index.pug
`-- css
    `-- styles.css


In my template, I am trying to include three stylesheets: styles.css (personal stylesheet), a bootstrap CDN (bootstrap is already installed in my project), and a google fonts stylesheet.

If anyone could take a look at my code below and let me know what I might be doing wrong, I would greatly appreciate it.

doctype html
html(lang="en")
  head
    title Cloudii Weather Analysis
    style
      // BOOTSTRAP link(rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'
      integrity='sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u' crossorigin='anonymous')

     //GOOGLE FONTS link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Pacifico&display=swap')

     // STYLES.CSS link(rel='stylesheet', href='./css/styles.css')

  body
    img(src='images/cloudii_bg.png')

    div
      h2 cloudii
      img(src='images/cloudii_logo.png')

    div.form-row
      div.form-group.col-md-6
        label.label city
        input#inputCity.form-control

      div.form-group.col-md-4
        label.label state
        select(id="inputState" class="form-control")
          each state in states
            option(value=state.id) #{state.name}


      div(class="form-group col-md-2")
        label.label zip
        input(type="text" class="form-control" id="inputZip")
        button(id="submit" type="submit" class="btn btn-primary btn-lg btn-block hoverable">check weather)

Answer №1

After redirecting express.static to the views directory and relocating the stylesheet into that same folder, everything started functioning smoothly!

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

Display the menu upon activating the hover event icon using only CSS

Assistance Needed - Unable to activate hover and display the rest of the div I want to activate the hover effect where early levels are visible, and when hovering over the first level, the subsequent levels appear List item body { margin: 3%; } div.ti ...

How come I am able to reference a component in styled-components while others cannot?

When using styled-components, you can reference another React component using the syntax ${Label}. However, I have noticed that it only works with certain components and not others. Despite reading the documentation at , I encountered an issue when trying ...

Looping through ejs nodes triggers a Content Security Policy violation

Exciting news - I'm about to publish my very first query on Stack Overflow! ...

Combine two languages into a single <p>

I'm dealing with a WordPress website where I have a paragraph that contains two different languages. What I want to achieve is to display each language in a distinct font-family (font-face). For example: <p>למרות הכל its worth it</p& ...

Applying a dual background effect with one background repeating from the center using CSS3

I am trying to achieve a unique effect with CSS3 backgrounds. I want the second background image to start repeating from the middle of the screen down, rather than from the top. Below is my CSS code: body { background: url('../img/carbon_fibre.png ...

Struggling to determine the expense upon button activation - data remains stagnant

My coding project involves a basic ordering system where users can input an integer, click on an update button, and see the total cost displayed below. Despite my efforts, I've encountered issues with two different methods: Using plain JavaScript for ...

How do I customize the default styling of a single slider in react-slick?

Looking to enhance the look of slick carousels by customizing prev/next arrows and controlling their position? I'm currently using nextjs13, chakra-ui, react-slick, and vanilla extract. An effective way to customize arrow styles is by passing an arro ...

Uploading files in Angular application

I'm facing some minor issues with file uploads for the first time. My project consists of an Angular 7 app and a NodeJS (express) backend. I have successfully uploaded images through the Angular page and stored them with the correct format in NodeJS. ...

Scoped Styles rarely stand a chance against more dominant styles

I'm facing a scope issue while learning Vue. Question: I am trying to make sure that the styles in profile.vue do not override the ones in sidebar.vue. I want the sidebar to have a red background and the profile section to be blue. Shouldn't usi ...

"The loop functionality appears to be malfunctioning within the context of a node

Below is the code snippet: for (var j in albums){ var album_images = albums[j].images var l = album_images.length for ( var i = 0; i < l; i++ ) { var image = album_images[i] Like.findOne({imageID : image._id, userIDs:user ...

I need to create a login form using Angular - what steps should I follow?

I'm currently in the process of developing a login form for my website. Utilizing angular, express, and mongoDB. Below is the login function controller I have implemented: loginUser: (req, res) => { User.findOne({ username: req.bo ...

Why is the deployed Express server failing to establish a session?

After deploying a node express server on Digital Ocean, I encountered an issue where the session was not being created. To address this, I implemented a store to prevent memory leak and included app.set('trust proxy', 1) before initializing the s ...

Automatically return to the original URL after making a request

How can we dynamically return to the same page after a delete request is made? Request link: The request link that appears on multiple pages. <a href="/delete/id">delete</a> route.js router.get('/delete/:id', function (req, re ...

The resolve in Angular UI-Router is not being properly injected into the controller

As a Java developer venturing into the world of Angular and Express, I am encountering challenges along the way. To gain hands-on experience, I am attempting to create a small application using these technologies. The Goal: I have provided a password rese ...

Issues with image uploads in Node.js database storage

Trying to update an image using the put method is resulting in a 'filename' undefined error. Interestingly, the image updates successfully when editing without changing the image. The code snippet below shows the implementation: app.put('/a ...

Click the button to trigger the pop-up

After creating a photo gallery using a plugin, my goal is to display this gallery when the user clicks on my homepage button. I am unsure how to make this happen and would appreciate any assistance. Below is my button code: <div class="ow-button-base ...

Trouble with request ordering in POST method with Node.js and Postman

Currently, I am diving into the world of node.js and leveraging Postman to handle requests with parameters in the request body. When it comes to setting up the router: router.post('/locations', ctrlLocations.locationsCreate); below is a glimpse ...

Choosing elements in HTML using jQuery from an Ajax GET response

As a programming student, I am currently working on developing a basic website using HTML, JavaScript, and jQuery for the front-end, while utilizing node.js and Express frameworks for the back-end. In my project, I have used Ajax to retrieve data and then ...

Retrieve all records that have a matching query value within a referenced field

I am attempting to retrieve all the data from my Orders schema that matches any of the receiver/sender/driver phoneNumber fields in the Orders schema. These fields are references to the Users schema. My dilemma arises when I search for a phoneNumber with r ...

The middleWare protection function is not operating as anticipated

I have been following a tutorial on MERN stack development, specifically focusing on implementation of a "protect" function to manage user authentication. However, I've encountered an issue with the functionality not working as expected. This is my pr ...