10

我有这个玉文件：

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

输出：

$ 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>

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

4

7 回答 7

13

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

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

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

于 2012-05-15T12:18:44.090 回答
9

来自玉文档：

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

它工作完美。

于 2015-03-09T09:14:32.280 回答
2

Arnaud 的回答对我有用，但我发现这更干净一些：

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

这(type="text/css")也是可选的，具体取决于您的情况。

于 2014-02-01T00:13:08.203 回答
2

作为数据传入fs，你可以

style !{fs.readFileSync("index.css").toString()}
于 2013-06-04T02:01:07.173 回答
0

在当前版本的 Jade (0.35.0)中，只需编写 include style.css.

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

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

请注意模板中没有style标签，它会被玉自动插入（多么好的功能！）。

于 2013-12-20T07:15:07.223 回答
0 
style(type="text/css").
  #{css}

试试这个pug.render(..., { css: yourCssString })

于 2021-06-16T13:26:21.407 回答
-1

一个可能的解决方案是：

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

res.render(...)然后在调用中传递 css-text 。

于 2012-05-15T07:58:35.500 回答