How to use the style tag with jade templates?

pug

Solution

There are three ways of putting text inside your tags in Jade

1. Put text just after the tag e.g.

h1 Some header text

And the output will be:

<h1>Some header text</h1>

2. Put indented text below the tag with `|` e.g.

p
    | Some text goes 
    | here

And the output will be:

<p>Some text goes here</p>

3. Suffix the tag with a dot and indent your text below (with no `|`) e.g.

p.
    This way 3rd way of putting 
    text inside

And the output will be:

<p>This way 3rd way of putting text inside</p>

So based on the above, the approach you chose (as in your comment) is correct (option 3).

doctype 5
html(lang="en")
    head
        style(type='text/css').
           .ui-title {
                margin: 0.6em 10% 0.8em !important;
            }

I hope that will help.

Problem

This style code worked for me a few months back. I have updated to the latest Jade NPM package and now it is not working. Can some please assist me with the proper way to inline a style in a Jade template? ``` doctype 5 html(lang="en") head style(type='text/css') .ui-title { margin: 0.6em 10% 0.8em !important; } ``` I get this error on the closing } ``` unexpected text } ```

Original source