CODEWITHSUNDEEP
node.jspug
user470370
user470370

Reputation: 572

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

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.

Upvotes: 10

Views: 15578

Answers (7)

Devye
Devye

Reputation: 61

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

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

Upvotes: 0

Fizer Khan
Fizer Khan

Reputation: 92745

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.

Upvotes: 9

kennethormandy
kennethormandy

Reputation: 2150

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.

Upvotes: 2

ctitarenko
ctitarenko

Reputation: 9

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

Upvotes: 0

jpillora
jpillora

Reputation: 5262

Pass fs in as data and you can

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

Upvotes: 2

Arnaud Rinquin
Arnaud Rinquin

Reputation: 4306

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 ?

Upvotes: 13

jsbeckr
jsbeckr

Reputation: 1193

A possible solution would be:

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

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

Upvotes: -1

Related Questions