web-dev-qa-db-ja.com

jadeテンプレートでstyleタグを使用する方法は？

このスタイルのコードは、数か月前に私のために機能しました。最新のJade NPMパッケージにアップデートしましたが、現在は機能していません。ジェイドテンプレートのスタイルをインライン化する適切な方法を教えてください。

doctype 5
html(lang="en")
    head
        style(type='text/css')
           .ui-title {
                margin: 0.6em 10% 0.8em !important;
            }

終了時にこのエラーが発生します}

unexpected text }
pug
58
MobileGuy

Jadeのタグ内にテキストを配置する方法は3つあります

1.タグの直後にテキストを挿入します。

h1 Some header text

出力は次のようになります。

<h1>Some header text</h1>

2. |を使用して、タグの下にインデントされたテキストを挿入します。

p
    | Some text goes 
    | here

出力は次のようになります。

<p>Some text goes here</p>

3.タグにドットを付加し、下のテキストをインデントします（|なし）。

p.
    This way 3rd way of putting 
    text inside

出力は次のようになります。

<p>This way 3rd way of putting text inside</p>

したがって、上記に基づいて、（コメントのように）選択したアプローチは正しいです（オプション）。

doctype 5
html(lang="en")
    head
        style(type='text/css').
           .ui-title {
                margin: 0.6em 10% 0.8em !important;
            }

それが役立つことを願っています。

56
Tom

これは私のために働いた：

style.
  body {
    background-color: {{themeColor}};
  }

入手先： https://github.com/mquandalle/meteor-jade/issues/102 ここで、投稿では"dot notation"の使用が提案されています

62
Gene Bo

これがその方法です（デザイナーバージョン）

include [some-html-include-name].html

次に、そのインクルードファイルにstyleタグとスタイルを配置します

<style type="text/css">
/* your styles here */
2
yowainwright

Forファイルで私のために働く

style(media='screen', type='text/css')
     @media (min-width: 1200px) {
        .container{
           max-width: 970px;
             }
          }
1
mcbjam