javascript 使用shadcn组件使用Next.js pages目录

gojuced7  于 2023-09-29  发布在  Java
关注(0)|答案(1)|浏览(105)

我不能让一个简单的阴影按钮工作,因为我不能导入按钮。我使用的是nextjs13,但我仍然使用pages目录。下面是我如何安装shadcn。
webpage上的安装命令

npx shadcn-ui@latest init

我在命令行中输入的

✔ Would you like to use TypeScript (recommended)? … no / yes
✔ Which style would you like to use? › Default
✔ Which color would you like to use as base color? › Slate
✔ Where is your global CSS file? … styles/globals.css
✔ Would you like to use CSS variables for colors? … no / yes
✔ Where is your tailwind.config.js located? … tailwind.config.js
✔ Configure the import alias for components: … @/components
✔ Configure the import alias for utils: … @/lib/utils
✔ Are you using React Server Components? … no / yes
✔ Write configuration to components.json. Proceed? … yes

基本上当我安装按钮时我找不到lib文件夹

// File path: @components/ui/button.ts
//Error: TS2307: Cannot find module '@/lib/utils' or its corresponding type declarations.
import { cn } from "@/lib/utils"
...

这是我的文件夹结构是自动创建的

.
├── src
│   └── pages
│       └── home.tsx 
├── @
│   └── components
│       └── ui
│       │    ├── alert-dialog.tsx
│       │    ├── button.tsx
│       │    └── dropdown-menu.tsx
│       │
│       └─ lib
│           └── utils.ts
├── styles
│   └── globals.css
├── next.config.js
├── package.json
├── postcss.config.js
├── tailwind.config.js
└── tsconfig.json

请注意,这与shadcn作为他如何构造他的示例的内容略有不同。自动创建了@

.
├── app
│   ├── layout.tsx
│   └── page.tsx
├── components
│   ├── ui
│   │   ├── alert-dialog.tsx
│   │   ├── button.tsx
│   │   ├── dropdown-menu.tsx
│   │   └── ...
│   ├── main-nav.tsx
│   ├── page-header.tsx
│   └── ...
├── lib
│   └── utils.ts
├── styles
│   └── globals.css
├── next.config.js
├── package.json
├── postcss.config.js
├── tailwind.config.js
└── tsconfig.json

这里是我的components.json

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "styles/globals.css",
    "baseColor": "slate",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}

我的tailwind.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    './pages/**/*.{ts,tsx}',
    './components/**/*.{ts,tsx}',
    './app/**/*.{ts,tsx}',
    './src/**/*.{ts,tsx}',
    ],
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: 0 },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: 0 },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate"), require("daisyui")],
}

我做错了什么?

6xfqseft

6xfqseft1#

shadcn示例中的@不是文件夹,而是路径别名。
将组件和lib目录移动到src目录

.
├── src
│   └── pages
│   │   └── home.tsx 
├   │
│   └── components
│   │   └── ui
│   │        ├── alert-dialog.tsx
│   │        ├── button.tsx
│   │        └── dropdown-menu.tsx
│   │
│   └─ lib
│   │   └── utils.ts
│   └─ styles
│       └── globals.css

然后在您的tsconfig.json

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

这意味着无论何时你写@/components/whatever编译器都会在ROOT => src/components/whatever查找这个路径。@/lib/utils表示<ROOT>/lib/utils
但是使用你当前的配置,当你写import { cn } from "@/lib/utils"时,它会在./@/components/ui/button/@/lib/utils中查找它,但没有找到。

相关问题