Issue with importing CSS in Pug-Template

Looking to develop a Website using node.js and express with Pug as the template language, incorporating Bootstrap CSS. However, encountering an issue where Pug is not importing my custom CSS but is successfully importing Bootstrap CSS.

Experimented with different folder structures, including placing the CSS file in the same folder as the Pug file, but unsuccessful in resolving the problem.

Tried simplifying the CSS content by adding basic styling such as providing background colors for the body or header block, but still unable to achieve the desired result.

Any assistance on this matter would be greatly appreciated, as I have been unable to locate someone else facing a similar issue.

Here's an excerpt from my Pug file:

head
  title= title

  //Bootstrap
  link(rel="stylesheet", href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css", integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u", crossorigin="anonymous")
  link(rel="stylesheet", href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css", integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp", crossorigin="anonymous")

  //Jquery
  script(src="https://code.jquery.com/jquery-2.2.4.js", integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=", crossorigin="anonymous")

  //Own
  link(rel="stylesheet", type="text/css", href="../css/navbar.css")
  script(src="../javascript/navbar.js")

  p  test

  nav
    div(class="menu-icon")
      i(class="fa fa-bars fa-2x")

    div(class="logo")
      LOGO
    div(class="menu")
      ul
        li
          a(href="/") Home
        li
          a(href="/") Home2

And here is my custom CSS file:

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
}

body {
  font-family: "Helvetica Neue",sans-serif;
  font-weight: lighter;
}

header {
  width: 100%;
  height: 100vh;
  background: url(https://wallpaper.wiki/wp-content/uploads/2017/05/wallpaper.wiki-Beautiful-Full-HD-Wallpaper-Download-Free-PIC-WPE0010098.jpg) no-repeat 50% 50%;
  background-size: cover;
}

... (CSS continues)

Answer №1

Success! I finally figured out the resolution.

All I had to do was include this line of code:

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

In my node server file, then organize the css files in a separate directory within the public folder.

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

Tips on adding CSS to a React component

I've successfully converted an HTML file into a component designed to resemble a 7-segment LED display. I have imported the necessary CSS styles from the index.css file, but I am unsure how to properly apply these styles within the component. My atte ...

Angular Recursive Bootstrap Breadcrumb Guide

I am looking to implement the bootstrap breadcrumb component (https://getbootstrap.com/docs/4.0/components/breadcrumb/) in my project. My goal is to use the breadcrumb to show the entire path to the current directory within a component that resembles a di ...

I am currently in the process of creating a website navbar with HTML and Tailwindcss, but unfortunately, I am running into issues with the desired functionality not being

Even after trying the group-hover:block technique, I am still unable to see the dropdown menu when hovering over the solution and resources. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

Utilize the conditional GET method when including scripts through tags in an HTML webpage

Is it possible to benefit from HTTP conditional requests when including a script in the head section of a page? My goal is to cache dynamically downloaded JavaScript files that are added to the head section using script tags. If this approach isn't fe ...

Update the innerHTML content dynamically every 5 seconds with Vue.js

I'm working on a new website and I'd like to spice things up by changing the header text with a random word every 5 seconds. Here's the starting point: const header = document.querySelector('.header') const needs = ['jacket& ...

The burger icon in the navigation bar is malfunctioning, showing just a single horizontal line instead

I've been working on creating a responsive layout button that resembles the following design: https://i.sstatic.net/v5vDd.png However, I've encountered an issue where I can't seem to generate all three horizontal lines, only one of them. T ...

Reduce the count of products when the button is clicked

Hey there! I'm running a special promotion on my website with limited spots available at a reduced price. I'd love to have a real-time counter that shows the number of remaining spots, decreasing by one each time someone clicks the 'sign up& ...

Avoiding the utilization of HTML forms

Is it acceptable to send form information using jQuery instead of creating an HTML form? By skipping the traditional HTML form and using $.ajax in jQuery, are there any security, performance, or semantic issues to be concerned about? Does this approach a ...

Creating an email-friendly button in Outlook without using images by styling a hyperlink with padding

Presenting a basic HTML code snippet - https://jsfiddle.net/mark69_fnd/6g0L0jwc/ <body style="background-color: white; font: normal 14px Verdana"> Hello <p></p> <a style=" font: bold 11px; text-decoration: none; background-color ...

Why is the defaultDate property not functioning properly in Material-UI's <DatePicker/> component with ReactJS?

I recently implemented the <DatePicker/> component from Material-UI ( http://www.material-ui.com/#/components/date-picker ) in my project. I encountered an issue while trying to set the defaultDate property to the current date on my computer, as it r ...

Requesting data asynchronously using AJAX and displaying the filtered results on a webpage using JSON

When I send a request to my node.js server for a .json file containing person information (first name, last name), I want the data to be filtered based on user input. For example: When I request the .json file from the server, it gives me a list of people ...

"Learn how to properly load the style.css file from the root directory into your WordPress page.php and single.php files

Having an issue with my WordPress theme. The style.css stylesheet does not seem to be loading in the page.php contents. I noticed that when I add <div class=w3-red"> <button class="w3-btn w3-red"> and other related codes while editing a post in ...

What is the best way to retrieve and display data from a JSON object that has been encoded using json_encode on one page.php, in another page.php?

I have a specific requirement that involves calling JSON data from one PHP page and displaying it on another PHP page. Can someone guide me on how to achieve this? Below is the JSON code that I need to retrieve: <?php include("Connect.php"); $Db = m ...

Bootstrap does not support horizontal alignment of columns

I can't seem to get my columns to align horizontally in bootstrap. I want the image on the left and the text on the right, but they keep stacking vertically. Can someone help me with this? As far as I know, col-md-6 should divide the page into 2 colu ...

How can you display a message if a variable is not found in a MySQL table?

My current code is set up to display links from a MySQL database where the movie_id matches the GET id. However, I would like to update it so that if no links are found with that movie_id, it will instead echo a message saying "No links were found." < ...

Uniform dimensions for HTML tables

When creating an HTML document with consecutive tables that need to be formatted the same way, it can be challenging. Browsers will often render columns of one table wider than another simply due to content width. The typical solution is to hard-code colu ...

"Struggling with setting the default checked state for single and multiple checkboxes? The ng-init method with checkboxModel.value=true seems to be ineffective – any suggestions

<input type="checkbox" ng-model="isChecked.value" ng-true-value="'yes'" ng-false-value="'no'" ng-click='handleCheckboxChange(isChecked.value, idx);' ng-init="isChecked.value=true" /> ...

Getting rid of the border on a material-ui v4 textbox

I am currently using Material-UI version 4 and have not upgraded to the latest mui v5. I have experimented with various solutions, but so far none have been successful. My goal is simply to eliminate or hide the border around the textfield component. < ...

connect a column from a separate array in pdfmake

In my current project, I am looking to link the values of an array that is different from the one present in the initial two columns. Is this achievable? (The number of partialPrice values aligns with the number of code entries). Despite several attempts ...

Issue with CSS animations not functioning correctly within React application

Currently in the process of creating a basic dice roller and aiming to incorporate a spin animation for added visual interest. Strangely, the animation only triggers on the first roll and not on subsequent attempts (unless I refresh the page). Here is the ...