How to include a css file in jade (without linking it)

T

7

10

I have this jade file:

!!! 5
html
  head
    title test include
    style(type='text/css')
      //- DOES NOT WORK!
      include test.css
  body
    //- works
    include test.css
    div 
      //- works
      include test.css

The output:

$ jade -P test.jade 
rendered test.html
$ cat test.html
<!DOCTYPE html>
<html>
  <head>
    <title>test include</title>
    <style type="text/css">
      //- DOES NOT WORK!
      include test.css
    </style>
  </head>
  <body>body { color: peachpuff; }

    <div> body { color: peachpuff; }

    </div>
  </body>
</html>

Of course, I could simply link the css-file, but I do not want to.

Trephine answered 15/5, 2012 at 6:54 Comment(2)

I don't think that's possible, but why not the simple solution? – Zosima 15/5, 2012 at 7:53

I guess that you want to separate CSS from HTML in server files but provide style within html to avoid additional request to get the CSS. That is wrong : you add additional computing (file inclusion) for a file that would not be requested every time because it would be cached. – Ralston 16/5, 2012 at 19:36

R

13

I didn't test it yet (not on my dev computer ATM) but there is a chance doing something like this could work :

!!!
head
  title test include
  | <style type='text/css'>
  include test.css
  | </style>

By the way, I found the HTML2Jade online converter but not the Jade2HTML. Any idea where to find it ?

Ralston answered 15/5, 2012 at 12:18 Comment(1)

thank you, works! i do not know any online converter. but i found the reason for failing first: "Tags that accept only text such as script and style do not need the leading | character" (github.com/visionmedia/jade) – Trephine 17/5, 2012 at 15:11

G

9

From jade docs:

doctype html
html
  head
    style
      include style.css
  body
    h1 My Site
    p Welcome to my super lame site.

It works perfect.

Germanism answered 9/3, 2015 at 9:14 Comment(1)

While this do works, I want to add that it's equal to the code in the original question, the difference is version(3 years elapsed). – Artina 15/6, 2016 at 7:23

U

2

Pass fs in as data and you can

style !{fs.readFileSync("index.css").toString()}

Unmeriting answered 4/6, 2013 at 2:1 Comment(1)

not exactly cross-implementation safe, but a good hack nonetheless – Amoreta 30/7, 2013 at 8:33

R

2

Arnaud’s answer worked for me, but I’ve since found this is a little cleaner:

doctype
head
  title test include
  style(type="text/css"): include test.css

The (type="text/css") is optional, too, depending on your situation.

Receipt answered 1/2, 2014 at 0:13 Comment(0)

L

0

In current version of Jade (0.35.0) it would be enough to write just include style.css.

Complete example (considering you are writing index.jade, which is located in views folder, whereas your styles are in assets folder):

!!!
html
   head
       include ../assets/bootstrap3/css/bootstrap-theme.css
       include ../assets/bootstrap3/css/bootstrap.css
body
   h1 Hi!

Please note absence of style tag in the template, it would inserted automatically by jade (what a nice feature!).

Leola answered 20/12, 2013 at 7:15 Comment(2)

As of 1.0.0 (at least), this appears to no longer be the case: if you don't specify some more details the css is just included verbatim, not in a style tag – Coy 28/12, 2013 at 18:36

you must include a style tag, it will not be added automatically. – Lindblad 25/11, 2015 at 0:14

R

0

style(type="text/css").
  #{css}

try this with pug.render(..., { css: yourCssString })

Riobard answered 16/6, 2021 at 13:26 Comment(0)

Z

-1

A possible solution would be:

style(type="text/css")
    #{css}

And then pass the css-text in the res.render(...) call.

Zosima answered 15/5, 2012 at 7:58 Comment(2)

It is.. it's just a solution for his problem, which i don't really get at all. ;) – Zosima 16/5, 2012 at 10:41

See my comment about his goal ;) – Ralston 16/5, 2012 at 19:32

Recommended topics

Hot tags