Question

我有这个玉文件：

!!! 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文件，但我不想。

Answer 1

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

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

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

Answer 2

来自jade docs：

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

它完美无缺。

Answer 3

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

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

Answer 4

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

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

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

Answer 5

在当前版本的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标记，它会自动由jade插入（这是一个不错的功能！）。

Answer 6

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

用pug.render(..., { css: yourCssString })

试试这个

Answer 7

可能的解决方案是：

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

然后在res.render(...)调用中传递css文本。

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

7 个答案: