尝试使用shadcn/ui组件时需要在路径@/lib/utils中添加什么？

Question

我正在尝试在我的 React 应用程序中使用

shadcn

下拉组件。我没有使用 Tailwind。我按照他们的文档并选择了手动添加代码的路径，但现在我收到错误：

Module not found: Can't resolve '@/lib/utils'
  3 | import { CheckIcon, ChevronRightIcon, DotFilledIcon } from "@radix-ui/react-icons";
  4 |
> 5 | import { cn } from "@/lib/utils";
  6 |
  7 | const DropdownMenu = DropdownMenuPrimitive.Root;

请指导我需要添加到文件夹中的内容

@/lib/utils

。

Answer 1

cn() 可以在 shadcn git repo 中找到：

import * as React from "react"
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
    return twMerge(clsx(inputs))
} 

来源：https://github.com/shadcn-ui/ui/blob/bebc2843f0e0daa4e508def74fb3ba8a08e98f6f/apps/www/lib/utils.ts#L5C1-L6C1

Answer 2

@/

是必须在

tsconfig.json

或其等效项中定义的别名路径。

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"],
    }
  },
}

[]

之间指定的路径应相对于您的

lib

文件夹。如果您的

lib

位于

src

目录中，则它应该是

["./src/*"]

。如果您的

lib

位于根，那么它应该是

["./*"]

。