Tips on linking CSS files within a jade layout

I am having trouble referencing custom.css and bootstrap.min.css in my jade layout file that refers to views. It seems like the references are not working correctly. Can somebody please review my code to see if there is any issue?

Jade Layout

doctype html
html
  head
    title=title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    block content

View file

extends layout

block content
  h1= title
  p Welcome to #{title}

style.css

body {
 padding: 50px;
 font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
 background: #666;
}

p {
 color: #00B7FF;
}
cssnode.jspug

Answer №1

doctype html
    html
        head
            title= title
            link(rel="stylesheet" href="/stylesheets/style.css")


<!doctype html>
    <html>
        <head>
            <title> title </title>
            <link rel="stylesheet" href="/stylesheets/style.css" />
        </head>
   </html>

this code example demonstrates a basic structure in jade.
However, this alternative code arrangement presents a slight difference:

doctype html
    html
      head
      title= title
      link(rel="stylesheet" href="/stylesheets/style.css")

<!doctype html>
    <html>
        <head></head>
        <title> title </title>
        <link rel="stylesheet" href="/stylesheets/style.css" />
   </html>

In the second version, notice that the link tag is placed outside of the head element!
Proper indentation when working with jade is crucial for generating accurate HTML5 markup.

If your code is correctly indented and you're still facing issues, remember to verify the directory path within the app.js file for your 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

iOS search button with a unique blue outline border

On iOS, I'm seeing a strange blue border that I can't seem to get rid of. see image for reference I've exhausted all options like :focus and :active, but I can't pinpoint the source of the border. I've searched through different ...

htmlcssiosbootstrap-4border

Is there a more efficient approach to styling with CSS?

Here is the CSS I am currently using: .navbar-inverse .nav > li > youtube-dialog > a { color: #999999; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); padding: 10px 15px 10px; display: block; text-decoration: none; /*underline*/ } ...

htmlcss

Tips for implementing a null check within the findAll() function

I am inquiring about the database and some parameters on the request body are optional. Can someone please guide me on how to determine if certain fields, like categoryId, are nullable and perform the where query based on that? var categoryId = req.body ...

javascriptnode.jssequelize.js

Could integrating Firebase as the bridge between AngularJS and NodeJS be considered a less than optimal choice?

Seeking input on the design of a system I am constructing. Currently, I have several Node.JS scripts updating a Firebase DB, with front-end AngularJS apps retrieving data from the Firebase DB. This setup is functioning effectively. Now, I am looking to ...

javascriptnode.jsangularjsfirebase

Mismatched units px and rem (existing fixes are ineffective)

Recently, I attempted to implement custom sass in a project at work. However, when running npm watch, I encountered the error: Incompatible units px and rem. The root of the issue seems to be in _variables.scss where the following line resides: $input-h ...

csslaravelvue.jssassbootstrap-4

Issue with Mongodb Aggregation: $lookup and $unwind not returning any results

I'm attempting to retrieve messages based on a specified chatRoomId and display all messages in that chatroom along with the user data associated with the userId. However, the current code I have tried is returning an empty array. What could be the i ...

node.jsdatabasemongodbrestexpress

A straightforward method to flatten and unflatten JSON files

I've managed to flatten JSON files effortlessly by executing this command in a combination of Node.js and Bash: npx flat foo.json > bar-flat-output.json. But now, I'm searching for another foolproof command that can easily undo the flattening ...

node.jsjsonbash

Error: The code has a syntax issue due to an unexpected "function" token while using

Recently, I decided to try out Node version 6.2.1 with some of my code. My goal was to migrate the hyper-callback oriented codes to a cleaner and potentially more efficient approach. Surprisingly, when I attempted to run the node code in the terminal, an ...

javascriptnode.jsexpressasynchronousasync-await

What is the conventional method for sending data by utilizing the output of a previous data submission in Node.js with Express and FaunaDB?

I am in the process of revising a project and have a question about how to post an array of data using the return value of a previous post request as the ID. Here is an overview of the data structure: Checklist A [ChecklistItem 1, ChecklistItem 2, Checkli ...

javascriptnode.jsexpressfaunadb

Customizing CSS for Various Browser Sizes

I have a query regarding window-dependent CSS. It seems to be a common issue, but I am facing some difficulties with it on Wordpress. I am currently using the script recommended by Nettuts. My goal is to apply different CSS styles based on the user's ...

jquerycssresizewindow

What is the best way to retrieve recently inserted data using Sequelize in PostgreSql?

Is there a way to retrieve updated table values after adding a user to the "WOD" table without making an additional query? Currently, when I add a third user to my WOD table, I can only return the first two users because I am unable to access the updated ...

javascriptnode.jspostgresqlexpresssequelize.js

I am seeking assistance with incorporating mySQL into my Node.js project with React

Currently, I am working on a web-app utilizing Node.js. The main goal is to retrieve information from my local database in MySQL Workbench. Initially, I decided to focus on building the frontend interface before diving into implementing the functionality s ...

javascriptmysqlnode.jsreactjsnpm

What could be the reason for the unexpected behavior of comparing an environment variable with undefined in Jest?

During the process of creating Jest tests to validate the existence of a required environment variable, I encountered unexpected behavior while comparing the variable to undefined. The @types/node documentation implies that each environment variable is eit ...

node.jstypescriptjestjsundefinedts-jest

Creating PDFs from DOCX files using NodeJS and TypeScript

I'm struggling to convert a DOCX file to a PDF in NodeJS using NestJS and TypeScript. I've tried several methods, but they all seem to fail: @nativedocuments/docx-wasm: NativeDocuments is not functioning as expected. word2pdf: This project is ar ...

javascriptnode.jstypescriptpdf-generationnestjs

Steps for removing the label associated with an input field in an HTML form

I attempted to use JQuery and JavaScript in order to modify the CSS of a label to make it greyed out, but unfortunately I have not been able to achieve this. The label is positioned next to a checkbox, and although I am able to disable the checkbox, I hav ...

javascriptjqueryhtmlcss

Banner Placement

Is there a way to arrange 3 banners without using absolute positioning? I prefer to use relative positioning so that the footer doesn't overlap with the page. How can I achieve this layout? .bms { height: 810px; left: 0; position: absolute; ...

htmlcss

Utilizing the "return" keyword in Javascript outside of function declarations

Exploring the Impact of Using the Return Keyword in JavaScript Scripts Beyond Functions in Browsers and Node.js Recently, I experimented with utilizing the return keyword in a Node.js script like so: #!/usr/bin/env node return 10; My initial assumption ...

javascriptnode.jsbrowserecmascript-6

Border at the Top and Text Alignment Problem

I am working on a basic navigation bar that includes a hover effect. .navip { float: left; text-decoration: none; font-weight: lighter; } .navip > a { display: block; color: black; text-decoration: none; font-size: 20px; ...

htmlcssnavigation

Why is the data not being fetched in the initial request to the REST API?

When I call my REST API for the first time, it returns an empty array. However, on the second call, it returns the desired result. Below are the files involved: mongodb.js - used for connecting to the MongoDB database var MongoClient = require('mong ...

node.jsrest

It seems that Firefox is ignoring the word-wrap style when the class of a child element is changed

Take a look at this: var iconIndex = 0; var icons = ['check', 'chain-broken', 'flag-o', 'ban', 'bell-o']; $('button:eq(0)').click(function() { iconIndex = (iconIndex + 1) % icons ...

javascriptjqueryhtmlcssfirefox