Pug code block이 예상치 못한 토큰 오류를 던지고 있습니다.

질문

저는 아래와 같은 mixin을 가지고 있습니다.

I have the following mixin:

mixin color(c, color)
    if (c == 0)
        div(class=`${color}-50`) red-50
    else if (c == 5)
        div(class=`${color}`) red
    else
        div(class=`${color}-${c*100}`) red-#{c*100}

저는 그 후 아래 코드를 사용하여 mixin을 사용합니다.

I then use the following code to use the mixin:

block content
    .grid
        -
            var colors = ['red', 'pink', 'purple']
            each color in colors
                .cell.cell-6
                    for (let i = 0; i < 10; i++)
                        +color(i, color)

제가 이렇게 했을 때, 아래와 같은 에러가 발생합니다.

When I do this, I get the following error:

SyntaxError: Unexpected token (186:5)
    at Parser.pp$4.raise (c:\Users\rnaddy\Documents\vscode\projects\web-framework\node_modules\acorn-globals\node_modules\acorn\dist\acorn.js:2488:13)
    at Parser.pp.unexpected (c:\Users\rnaddy\Documents\vscode\projects\web-framework\node_modules\acorn-globals\node_modules\acorn\dist\acorn.js:623:8)
    at Parser.pp.semicolon (c:\Users\rnaddy\Documents\vscode\projects\web-framework\node_modules\acorn-globals\node_modules\acorn\dist\acorn.js:600:59)
    at Parser.pp$1.parseExpressionStatement (c:\Users\rnaddy\Documents\vscode\projects\web-framework\node_modules\acorn-globals\node_modules\acorn\dist\acorn.js:1025:8)
    at Parser.pp$1.parseStatement (c:\Users\rnaddy\Documents\vscode\projects\web-framework\node_modules\acorn-globals\node_modules\acorn\dist\acorn.js:780:22)
    at Parser.pp$1.parseTopLevel (c:\Users\rnaddy\Documents\vscode\projects\web-framework\node_modules\acorn-globals\node_modules\acorn\dist\acorn.js:672:23)
    at Parser.parse (c:\Users\rnaddy\Documents\vscode\projects\web-framework\node_modules\acorn-globals\node_modules\acorn\dist\acorn.js:529:15)
    at Object.parse (c:\Users\rnaddy\Documents\vscode\projects\web-framework\node_modules\acorn-globals\node_modules\acorn\dist\acorn.js:3378:37)
    at reallyParse (c:\Users\rnaddy\Documents\vscode\projects\web-framework\node_modules\acorn-globals\index.js:22:16)
    at findGlobals (c:\Users\rnaddy\Documents\vscode\projects\web-framework\node_modules\acorn-globals\index.js:35:11)

이 이슈는 - code block에 있습니다.

The issue is in the - code block.

제가 형식을 잘못 사용하고 있나요? block code를 어떻게 하나요?

Am I doing some sort of formatting wrong? How can I do block code?

답변 1개

(추천 2)

pug와 javascript를 혼합하는 것은 쉽지 않습니다. 여기에는 두 가지 문제가 있습니다.

It's not easy to mix pug with JS, there are 2 problems here:

• "-"의 뒤에는 javascipt 표현식이 따라와야 하고, 같은 줄에 있어야 합니다. (제가 알기론)
  "-" should be followed by JS expession is the same line (as far as I know)
• PUG에는 for문이 없습니다. (제 생각에는)
  there are no "for" in PUG itself (i think)

그래서, 작업 코드는 다음과 같이 쓰여야 합니다.

So, the working code should be written as follows:

mixin color(c, color)
    if (c == 0)
        div(class=`${color}-50`) red-50
    else if (c == 5)
        div(class=`${color}`) red
    else
        div(class=`${color}-${c*100}`) red-#{c*100}

block content
    .grid
        - var colors = ['red', 'pink', 'purple']
            each color in colors
                .cell.cell-6
                    - var i = 0;
                    while i < 10
                        +color(i, color)
                        - i++

본문 [Pug code block is throwing Unexpected token error] 바로가기