옥 템플릿에서 스타일 태그를 사용하는 방법은 무엇입니까?

옥 템플릿에서 스타일 태그를 사용하는 방법은 무엇입니까?

---

이 스타일 코드는 몇 달 전에 저에게 효과적이었습니다. 최신 Jade NPM 패키지로 업데이트했는데 이제 작동하지 않습니다. 어떤 사람들은 Jade 템플릿에서 스타일을 인라인하는 적절한 방법을 도와 줄 수 있습니까?

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

닫을 때이 오류가 발생합니다}

unexpected text }

---

Jade의 태그 안에 텍스트를 넣는 세 가지 방법이 있습니다.

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>

---

따라서 위의 내용을 기반으로 선택한 접근 방식 (코멘트에서와 같이)이 정확합니다 ( 옵션 3 ).

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

도움이 되길 바랍니다.

---

이것은 나를 위해 일했습니다.

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

출처 : https://github.com/mquandalle/meteor-jade/issues/102 게시물에서 "점 표기법" 사용을 제안합니다.

---

이것은 그것을하는 방법입니다 (디자이너 버전)

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

그런 다음 포함 파일에 style태그와 스타일을 넣으십시오.

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

---

제이드 파일에서 나를 위해 일하십시오.

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

참고 URL : https://stackoverflow.com/questions/21765107/how-to-use-the-style-tag-with-jade-templates