Jade: modify <head> from any place other than the main page

Update:

I also posted this question to the Jade GitHub repository. I'm dropping it here too, for future (circular) reference: https://github.com/jadejs/jade/issues/1943

Original post:

In a default node + express + jade application, I'm trying to build some common reusable components (menu, footer...) that I can include in some pages. I got stuck while trying to add references to .css or .js files from a block or an included file. I want to do this because I don't want to include all the styles and scripts if I don't need them.

The folder structure is something like this:

Root
- public
  - javascripts
    - main.js
    - menu.js
  - stylesheets
    - main.css
    - menu.css
- views
  - shared
    - layout.jade
    - menu.jade
    - footer.jade
  - index.jade

The layout.jade file:

doctype html
html
  head
    title= title
    link(rel="stylesheet", href="stylesheets/main.css")
    script(src="javascripts/main.js")
  body
    block content

The index.jade file:

extends shared/layout

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

In menu.jade there is some code that needs the menu.css and menu.js files.

Now I need a way to add those files to the <head> of the page only when I use the menu.jade file.

I started using Jade a few hours ago so it's very possible that I missed something in the documentation.

Thank you!

Solution

You could do this with jQuery in your menu.js like so:

$("head link[rel='stylesheet']").last().after("<link rel='stylesheet' href='stylesheets/menu.css' type='text/css'>");

I would caution you about this practice however. One alternative would be to have a build step that concatenates all of your CSS files together and serves all of your style in a single css file. LESS and cssmin are good options here, and they have nice modules to automate this for you in grunt or gulp, whichever you're using.

You did mention that you didn't want to include all styles if you don't need them, but I would suggest that having a web browser download many small css files is going to be slower than having it download one big one, especially if you serve those files via a webserver like nginx that employs gzip, or if you serve your static files through a CDN like CloudFront.