如何在jade中包含css文件（不链接它）

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.

当然，我可以简单地链接css文件，但我不想。

6 个解决方案

#1

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

我还没有测试它（不是在我的开发计算机ATM上）但是有可能做这样的事情可以工作：

!!!
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 ?

顺便说一句，我找到了HTML2Jade在线转换器，但没有找到Jade2HTML。知道在哪里找到它？

#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

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

Arnaud的回答对我有用，但我发现这有点干净了：

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

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

（type =“text / css”）也是可选的，具体取决于您的具体情况。

#4

Pass fs in as data and you can

将fs作为数据传递，你可以

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

#5

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

在当前版本的Jade（0.35.0）中，只需编写包含style.css即可。

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

完整示例（考虑到您正在编写index.jade，它位于views文件夹中，而您的样式位于assets文件夹中）：

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

请注意模板中没有样式标记，它会由jade自动插入（这是一个很棒的功能！）。

#6

-1

A possible solution would be:

一个可能的解决方案是：

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

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

然后在res.render（...）调用中传递css-text。

#1