SCSS Import Error Trying to Run New Payload App

[lapis finch]

I hope it's OK to ask this here, as I've looked around and not found anything solid on this. I've just tried following the Payload Website Template Quick Start and created a new app with

pnpx create-payload-app panda-payload -t website
pnpm install

The install says everything is up to date, but pnpm dev gives me this error:

⨯ ./src/components/AdminBar/index.scss
Error evaluating Node.js code
Error: Can't find stylesheet to import.
  ╷
1 │ @import 'vars';
  │         ^^^^^^

That scss file has this import:

@import '~@payloadcms/ui/scss';

Gemini suggested some fixes, but I wanted to check here first, because I don't get why any fixing should be needed as the official guide seems to think this should all work right out the box. Also, My scss knowledge is minimal, as I've grown into Nextjs and React only using Tailwind. And I thought this template was Tailwind based and not scss.

[hoary horizon]

New Community-Help Thread Created!

Help is on the way! To mark it as solved, use the /solve command. In the meantime, here are some existing threads that may help you:

Documentation:

• Swap in your own React components - Defining Custom Components - Import Map
• Installation - Adding to an existing app - 2. Copy Payload files into your Next.js app folder
• Using Payload outside Next.js - Importing the Payload Config outside of Next.js - Troubleshooting
• Installation - Adding to an existing app - 3. Add the Payload Plugin to your Next.js config
• Hooks Overview - Root Hooks

Community-Help:

• build /admin/styles.css

[lapis finch]

SCSS Import Error Trying to Run New Payload App

[lapis finch]

I was able to work past this import error by creating the app with just:

pnpx create-payload-app panda-payload

without the website template, and just selecting blank when prompted for a type.

[safe sky]

this is a known issue for those on windows machines

The ~ prefix on SCSS imports is a Webpack sass-loader convention that isn't supported on Windows (and is deprecated in modern Sass/Turbopack). It was partially fixed in a previous PR but the template files were missed.

In the meantime, you can work around it by changing line 1 of src/components/AdminBar/index.scss and src/components/BeforeDashboard/index.scss yourself:

// Before
@import '~@civic sonnet/ui/scss';

// After
@import '@civic sonnet/ui/src/scss/styles';

And yes — the template is primarily Tailwind-based, but these two admin panel components use a small amount of Payload's internal SCSS for the small-break mixin and a few layout utilities that aren't available through Tailwind.

[lapis finch]

I still got "not found" errors with your import path, so I gave up and kludged them thus:
AdminBar:

-@import '~@payloadcms/ui/scss';
+@import '../../../node_modules/@payloadcms/ui/dist/scss/queries.scss';
+$breakpoint-s-width: 768px !default;

BeforeDashboard:

-@import '~@payloadcms/ui/scss';
+@import '../../../node_modules/@payloadcms/ui/dist/scss/vars.scss';

[safe sky]

sorry about that!

this is a bug for sure—I brought it to the team and we'll get this sorted out soon

[lapis finch]

Thanks for your help anyway. Once over this little snag it looks like I was quite lucky to happen on Payload.