主页 / coding / 问题 / 79424674
Accepted
Vatshal Negi
Asked: 2025-02-09 17:28:20 +0800 CST

TailwindCSS v4 和 Parcel 出现意外的 token CloseSquareBracket 错误

  • 772

我按照 Tailwind v4 文档中提到的所有步骤，使用 parcel 设置 TailwindCSS v4。设置后，当我运行本地服务器时出现此错误。

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\] {

我很困惑，因为 tailwind 内置文件代码（）中显示了错误，index.css而我无法编辑。

index.css文件仅包含以下内容：

@import "tailwindcss";

此问题仅发生在 TailwindCSS v4 中。请帮助我解决此错误。

reactjs

1 个回答

  1. Best Answer

    解决方案：排除node_modules使用.gitignore

    我刚刚试了一下。Tailwind 的自动源检测将扫描node_modules并在 node-addon-api npm 包中找到这些无效的类候选相似项，然后最终构建一些无效的 CSS，从而导致错误。

    .gitignore您可以通过在项目根目录添加忽略的方法来解决这个问题node_modules。

    TailwindCSS v4 的自动源检测

    对于 TailwindCSS v4 引擎，我们不需要指定使用的源。它会自动找到它们。但是，它也可能会在node_modules文件夹中搜索，在那里它可能会“错误地”检测到它认为我们正在使用的类。这就是未使用的类最终会出现在输出中的原因。

    但是，检测会考虑.gitignore文件中列出的规则，并忽略文件中阻止的路径。因此，在其中创建一个.gitignore并阻止始终是一个好主意：node_modules

    /node_modules/

    但您仍然可以使用@source指令指定单独的来源。

    扫描哪些文件

    Tailwind 将扫描项目中的每个文件以查找类名，但以下情况除外：

    • .gitignore您的文件中的文件
    • 二进制文件，例如图像、视频或 zip 文件
    • CSS 文件
    • 常见的包管理器锁文件
    • 2

相关问题