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

Question

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.

I don't think that's possible, but why not the simple solution? — jsbeckr, May 15 '12 at 07: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. — Arnaud Rinquin, May 16 '12 at 19:36

Arnaud Rinquin · Accepted Answer · 2012-05-16T10:31:27.283

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 ?

edited May 16 '12 at 10:31

answered May 15 '12 at 12:18

Arnaud Rinquin

4,296
1
30
51

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" (https://github.com/visionmedia/jade) – user470370 May 17 '12 at 15:11

score 9 · Answer 2 · answered Mar 09 '15 at 09:14

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.

answered Mar 09 '15 at 09:14

Fizer Khan

88,237
28
143
153

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). – Zhiyong Jun 15 '16 at 07:23

score 2 · Answer 3 · answered Jun 04 '13 at 02:01

2

Pass fs in as data and you can

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

answered Jun 04 '13 at 02:01

jpillora

5,194
2
44
56

not exactly cross-implementation safe, but a good hack nonetheless – coolaj86 Jul 30 '13 at 08:33

score 2 · Answer 4 · answered Feb 01 '14 at 00:13

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.

answered Feb 01 '14 at 00:13

kennethormandy

2,080
14
16

score 0 · Answer 5 · answered Dec 20 '13 at 07:15

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!).

answered Dec 20 '13 at 07:15

ctitarenko

9
1

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 – Tim Perry Dec 28 '13 at 18:36
you must include a style tag, it will not be added automatically. – Nicekiwi Nov 25 '15 at 00:14

score 0 · Answer 6 · answered Jun 16 '21 at 13:26

0

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

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

answered Jun 16 '21 at 13:26

yesung

51
5

score -1 · Answer 7 · answered May 15 '12 at 07:58

-1

A possible solution would be:

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

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

answered May 15 '12 at 07:58

jsbeckr

1,183
1
10
24

It is.. it's just a solution for his problem, which i don't really get at all. ;) – jsbeckr May 16 '12 at 10:41
1

See my comment about his goal ;) – Arnaud Rinquin May 16 '12 at 19:32

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

7 Answers7

Linked