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.

回答1:

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 ?

回答2:

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.

回答3:

Pass fs in as data and you can

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

回答4:

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.

回答5:

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

回答6:

A possible solution would be:

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

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

来源：https://stackoverflow.com/questions/10595593/how-to-include-a-css-file-in-jade-without-linking-it

标签

node.js

pug