2017-05-11 7 views
1

pug/jade를 처음 사용했습니다. 나는 "layout.pug", "home.pug"및 "mixins.pug"라는 3 개의 pug 템플릿 파일을 가지고 있습니다. layout.pug는 다음 코드가 포함Pug 파일을 컴파일하면 mixins.pug를 찾을 수 없습니다.

html 
    include mixins 
    body 
    include home 

이 home.pug 파일의 코드는 :

body 
    div.main 
    +popup('Hello', 'Hello World') 

퍼그 파일 'mixins.pug은'유지 mixin이 포함되어 있습니다. mixin popup()을이 파일에 추가했습니다. 이 파일의 코드 :

mixin popup(title, description) 
div.pop-up-body 
    h2 #{title} 
    p #{description} 

하지만 grunt pug 명령을 사용하여 내 퍼그 파일을 컴파일 할 때, 나는 오류 을 얻었다는 "pug_mixins.popup는 함수가 아닙니다."

이유를 아는 경우 친절하게 도와주세요.

+0

mixin 선언 안에서'# {}'을 사용하면 변수를 쓸 수 있습니다.'h2 ti tle' – mJehanno

+0

안녕하세요, 저는 이것을 시도했습니다. 그러나 변수 제목의 값이 아니라 브라우저에 단어 "제목"만 표시합니다. –

답변

4

이 질문에 대한 답변을 얻었습니다.

오류의 원인은 : 나는 layout.pug 파일의 mixins.pug 포함했다. 그러나 믹스 popup(title, description)home.pug 파일에서 호출됩니다. 따라서 mixin은 home.pug 파일에서 사용할 수 없습니다. (home.puglayout.pug 파일에도 포함되어 있으므로 은 layout.pug 파일에만 포함).

솔루션 : 내가 layout.pug 파일의 코드 include mixins를 제거하고 home.pug 파일로에게 을 추가했다.

코드 : layout.pug 파일

html 
    body 
     include home 

home.pug 파일

include mixins 
div.main 
    +popup('Hello', 'Hello World') 

mixins.pug 파일 당신이 필요하지 않은 것처럼 보인다

mixin popup(title, description) 
    div.pop-up-body 
     h2 #{title} 
     p #{description}