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)