Início / coding / Perguntas / 79424674
Accepted
Vatshal Negi
Asked: 2025-02-09 17:28:20 +0800 CST

Erro inesperado de token CloseSquareBracket com TailwindCSS v4 e Parcel

  • 772

Eu segui todos os passos mencionados nos documentos do Tailwind v4, para configurar o TailwindCSS v4 com o parcel. Após a configuração, quando estou executando o servidor local, então recebi esse erro.

Server running at http://localhost:1234
🚨 Build failed.

@parcel/transformer-css: Unexpected token CloseSquareBracket

C:\Users\vatsh\OneDrive\Desktop\study\coding\4\src\index.css:1781:11            
    > 1780 |   .\[host\:\]port\] {
    > 1781 |     host: ]port;
           |           ^
      1782 |   }
      1783 |   .\[keywords\:node-addon-api\] {

Não tenho a mínima ideia porque está mostrando erro no código do arquivo interno do tailwind ( index.css) que não consigo editar.

index.cssarquivo contém apenas isto:

@import "tailwindcss";

Isso está acontecendo apenas no TailwindCSS v4. Por favor, ajude-me a resolver esse erro.

reactjs

1 respostas

  1. Best Answer

    Solução: excluir o node_modulesuso do.gitignore

    Acabei de testar. A detecção automática de origem do Tailwind escaneia node_modulese encontra esses class-candidate look-alikes inválidos no pacote npm node-addon-api e então acaba construindo algum CSS inválido, causando o erro.

    Você pode contornar isso adicionando um .gitignoreà raiz do projeto que ignora node_modules.

    Detecção automática de fonte do TailwindCSS v4

    Para o mecanismo TailwindCSS v4, não precisamos especificar as fontes que usamos. Ele as encontra automaticamente. No entanto, ele também pode pesquisar na node_modulespasta, onde pode detectar "incorretamente" classes que ele supõe que estamos usando. É assim que classes não utilizadas podem acabar na saída.

    A detecção, no entanto, leva em conta as regras listadas no .gitignorearquivo e ignora os caminhos que estão bloqueados ali. Portanto, é sempre uma boa ideia criar um .gitignorebloco and node_modulesnele:

    /node_modules/

    Mas você ainda pode especificar fontes individuais usando a @sourcediretiva.

    Quais arquivos são escaneados

    O Tailwind verificará todos os arquivos do seu projeto em busca de nomes de classes, exceto nos seguintes casos :

    • Arquivos que estão em seu .gitignorearquivo
    • Arquivos binários como imagens, vídeos ou arquivos zip
    • Arquivos CSS
    • Arquivos de bloqueio comuns do gerenciador de pacotes
    • 2

relate perguntas