[bug]: Sidebar CLI not identifying the src/styles/global.css file.

[fernandordev]

Describe the bug

I have my global.css file on SRC folder

"Something went wrong. Please check the error below for more details. If the problem persists, please open an issue on GitHub.

ENOENT: no such file or directory, open 'D:\folder\project\styles\global.css'"

Affected component/components

Sidebar

How to reproduce

Create a project with the SRC folder and the styles/global.css file inside.

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

W11 - Next 14.2.0

Before submitting

• [X] I've made research efforts and searched the documentation
• [x] I've searched for existing issues

[fernandordev]

The issue was resolved by changing the components.json file.

[ScottWallace]

Could you describe the change you made to the components.json file?

I'm getting the same issue, but with the globals.less file, which exists and is in the proper place. Here is my components.json file:

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

And, just for completeness, here's my globals.less file:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 240 10% 3.9%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 240 4.9% 83.9%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
  }
}

And here is the specific command and error:

npx shadcn@latest add sidebar
✔ Checking registry.
✔ Updating tailwind.config.js
⠋ Updating styles/globals.less
Something went wrong. Please check the error below for more details.
If the problem persists, please open an issue on GitHub.

ENOENT: no such file or directory, open '/Users/scottwallace/Desktop/vite-react-ts-tailwind-starter-main/styles/globals.less'

Thank you for any details you could provide.

[fernandordev]

@ScottWallace

My global.css file was located in src/styles/global.css, but in my components.json file, the configuration was set to 'css: "styles/globals.css"'. I added src/ to the path, and it worked.

[ScottWallace]

Very good. Thank you @fernandordev, for the solution, and the quick response.