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

データとして渡すfsと、次のことができます

style !{fs.readFileSync("index.css").toString()}
于 2013-06-04T02:01:07.173 に答える
2

Arnaudの答えは私にとってはうまくいきましたが、それ以来、これは少しきれいであることがわかりました。

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

(type="text/css")状況に応じて、もオプションです。

于 2014-02-01T00:13:08.203 に答える
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テンプレートにタグがないことに注意してください。これは、jadeによって自動的に挿入されます（すばらしい機能です）。

于 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}

次に、呼び出しでcss-textを渡しres.render(...)ます。

于 2012-05-15T07:58:35.500 に答える