fix(ui): invalid sass imports to support windows - add Stylelint to prevent regression by rubixvi · Pull Request #15028 · payloadcms/payload

rubixvi · 2025-12-23T23:32:52Z

Fixes invalid Sass import paths in the compiled @payloadcms/ui output that currently rely on legacy webpack resolution behavior.

Fixes issue #15011

./nodemodules/.pnpm/@payloadcms+ui@3.69.0@type_f6dae4b1d169b9370a166162f9bf6e5f/node_modules/@payloadcms/ui/dist/widgets/CollectionCards/index.scss

Error evaluating Node.js code
Error: Can't find stylesheet to import.
  ╷
1 │ @import 'vars';
  │         ^^^^^^

Patch file

diff --git a/dist/widgets/CollectionCards/index.scss b/dist/widgets/CollectionCards/index.scss
index 0330e9c283160e35ad22f7f244bba840bc57c66f..c8776a72ede7877fc2fba855a89b96603f7eb5b9 100644
--- a/dist/widgets/CollectionCards/index.scss
+++ b/dist/widgets/CollectionCards/index.scss
@@ -1,4 +1,4 @@
-@import '~@payloadcms/ui/scss';
+@import '../../scss/styles';
 
 @layer payload-default {
   .collections {

Running a patch file to adjust this import fixes the issue.

Fixes invalid Sass import paths in the compiled @payloadcms/ui output that currently rely on legacy webpack resolution behavior.

Riya922003 · 2025-12-28T16:41:23Z

@rubixvi Thank you so much for this! I was stuck on the same error :)

hoapooh · 2026-01-03T19:39:00Z

@rubixvi Thank you so much for this workaround, hope they will check for this soon!

Copilot

Pull request overview

This PR fixes invalid Sass import paths that relied on legacy webpack tilde (~) resolution behavior, which causes issues on Windows. The fix replaces tilde imports with relative paths and adds stylelint tooling to prevent future regressions.

Key Changes:

Replaced tilde-prefixed SCSS imports (~@payloadcms/ui/scss) with relative paths (../../scss/styles)
Added stylelint with a custom plugin to enforce relative paths and prevent tilde imports
Configured CI workflow to run SCSS linting alongside JavaScript/TypeScript linting

Reviewed changes

Copilot reviewed 8 out of 9 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
`packages/ui/src/widgets/CollectionCards/index.scss`	Updated import from tilde syntax to relative path with `.scss` extension
`packages/ui/src/providers/LivePreview/index.scss`	Updated import from tilde syntax to relative path without extension
`package.json`	Added stylelint, postcss, and postcss-scss dev dependencies, plus new `lint:scss` script
`pnpm-lock.yaml`	Lock file updates for new stylelint and postcss dependencies
`.stylelintrc.json`	New stylelint configuration with custom plugin for tilde import detection
`.stylelint/no-tilde-imports.js`	Custom stylelint plugin to detect and report tilde imports in SCSS
`.vscode/settings.json`	Enabled stylelint with auto-fix on save for CSS/SCSS files
`.vscode/extensions.json`	Added stylelint VS Code extension recommendation
`.github/workflows/main.yml`	Added SCSS linting step to CI workflow

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

GermanJablo

Thank you!

github-actions · 2026-01-05T20:07:51Z

🚀 This is included in version v3.70.0

GermanJablo · 2026-01-05T20:18:56Z

I haven't had access to a Windows device to verify the fix. Can anyone confirm if this has been fixed in v3.70?

rubixvi · 2026-01-05T20:52:09Z

I haven't had access to a Windows device to verify the fix. Can anyone confirm if this has been fixed in v3.70?

It's fine.

…revent regression (#15028) Fixes invalid Sass import paths in the compiled @payloadcms/ui output that currently rely on legacy webpack resolution behavior. Fixes issue #15011 ``` ./nodemodules/.pnpm/@payloadcms+ui@3.69.0@type_f6dae4b1d169b9370a166162f9bf6e5f/node_modules/@payloadcms/ui/dist/widgets/CollectionCards/index.scss Error evaluating Node.js code Error: Can't find stylesheet to import. ╷ 1 │ @import 'vars'; │ ^^^^^^ ``` Patch file ``` diff --git a/dist/widgets/CollectionCards/index.scss b/dist/widgets/CollectionCards/index.scss index 0330e9c..c8776a7 100644 --- a/dist/widgets/CollectionCards/index.scss +++ b/dist/widgets/CollectionCards/index.scss @@ -1,4 +1,4 @@ -@import '~@payloadcms/ui/scss'; +@import '../../scss/styles'; @layer payload-default { .collections { ``` Running a patch file to adjust this import fixes the issue. --------- Co-authored-by: German Jablonski <43938777+GermanJablo@users.noreply.github.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

cameronrdecker · 2026-01-06T18:56:09Z

I'm getting this error with the file ./src/components/BeforeDashboard/index.scss while using version 3.70.0

Should this patch have fixed that file as well?

rubixvi · 2026-01-06T19:22:19Z

I'm getting this error with the file ./src/components/BeforeDashboard/index.scss while using version 3.70.0

Should this patch have fixed that file as well?

might need a full error log to figure out what the error is.

cameronrdecker · 2026-01-06T19:37:40Z

I'm getting this error with the file ./src/components/BeforeDashboard/index.scss while using version 3.70.0
Should this patch have fixed that file as well?

might need a full error log to figure out what the error is.

It's just the default BeforeDashboard component that came with the demo, and an .scss file that's included uses tilde-prefixed SCSS imports as well (@import '~@payloadcms/ui/scss';). I ended up just removing the include, as I probably won't keep that component for much longer anyways.

rubixvi · 2026-01-06T22:01:31Z

I'm getting this error with the file ./src/components/BeforeDashboard/index.scss while using version 3.70.0
Should this patch have fixed that file as well?

might need a full error log to figure out what the error is.

It's just the default BeforeDashboard component that came with the demo, and an .scss file that's included uses tilde-prefixed SCSS imports as well (@import '~@payloadcms/ui/scss';). I ended up just removing the include, as I probably won't keep that component for much longer anyways.

I mean if it were shippied with a template, then the fix would need to be applied to the project locally. Because GermanJablo also added in a linter to fix all that within payload upstream.

GermanJablo · 2026-01-07T11:15:17Z

I'm getting this error with the file ./src/components/BeforeDashboard/index.scss while using version 3.70.0

Since that file is inside a template, could you explain the steps to reproduce the problem? Did you use create-payload-app? Did you modify anything? Which database are you using? Are you using Webpack or TurboPack? Are you on a Windows device?

cameronrdecker · 2026-01-07T14:42:04Z

Since that file is inside a template, could you explain the steps to reproduce the problem? Did you use create-payload-app? Did you modify anything? Which database are you using? Are you using Webpack or TurboPack? Are you on a Windows device?

I'm pretty sure I used create-payload-app, but it was well over a year ago, so it may not exist in the base template anymore. The component that was causing the error was a dashboard insert that had functionality for running a data seed route to populate the database with some dummy data, and I had not modified the file at all since I cloned the template. I'm using Postgres and TurboPack on a Windows device.

…revent regression (payloadcms#15028) Fixes invalid Sass import paths in the compiled @payloadcms/ui output that currently rely on legacy webpack resolution behavior. Fixes issue payloadcms#15011 ``` ./nodemodules/.pnpm/@payloadcms+ui@3.69.0@type_f6dae4b1d169b9370a166162f9bf6e5f/node_modules/@payloadcms/ui/dist/widgets/CollectionCards/index.scss Error evaluating Node.js code Error: Can't find stylesheet to import. ╷ 1 │ @import 'vars'; │ ^^^^^^ ``` Patch file ``` diff --git a/dist/widgets/CollectionCards/index.scss b/dist/widgets/CollectionCards/index.scss index 0330e9c..c8776a7 100644 --- a/dist/widgets/CollectionCards/index.scss +++ b/dist/widgets/CollectionCards/index.scss @@ -1,4 +1,4 @@ -@import '~@payloadcms/ui/scss'; +@import '../../scss/styles'; @layer payload-default { .collections { ``` Running a patch file to adjust this import fixes the issue. --------- Co-authored-by: German Jablonski <43938777+GermanJablo@users.noreply.github.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

samuel-lf · 2026-01-30T03:33:41Z

I'm using version 3.73.0 and when importing ~@payloadcms/ui/scss into custom.scss I'm still getting the error @import 'vars'.

pratik-dyna123 · 2026-03-30T07:02:09Z

I'm using "@payloadcms/ui": "3.80.0", still getting error. I am using windows OS.

bormm · 2026-04-09T08:23:47Z

Just used v3.82.0 with "npx create-payload-app@latest -t website ." and payload / website template is still broken out of the box with this issue. Frustrating.

dminhhoang26 · 2026-04-10T03:54:59Z

Just used v3.82.0 with "npx create-payload-app@latest -t website ." and payload / website template is still broken out of the box with this issue. Frustrating.

same for me v3.82.1, all the import in **.scss is same pattern as the patch. switch to WSL Ubuntu is my choice

juhrlass · 2026-04-12T07:43:17Z

same for the ecommerce template with 3.82.1

bormm · 2026-04-15T14:09:36Z

Can someone explain why this is still happening? It seems it's an issue only on windows, but this fix here is explicit for windows.

bormm · 2026-04-15T14:43:29Z

Ok, now I understand: payload modules are fixed by this PR, but the templates are still broken on windows.
@dminhhoang26, @juhrlass @pratik-dyna123 @samuel-lf you can find a working workaround here: #16059 (comment)

GermanJablo · 2026-04-16T10:36:54Z

Thank you all for your comments, for opening an issue, and for your patience. I've opened a PR!

…Windows (#16295) ## Summary - Removes deprecated tilde (`~`) prefix from `@import` statements in all template SCSS files (`website`, `with-vercel-website`, `ecommerce`). The tilde syntax relies on legacy Webpack resolution behavior and is not supported by Turbopack, which is the default bundler in Next.js 16. - Adds `sassOptions.loadPaths` pointing to `@payloadcms/ui/dist/scss/` in each template's `next.config.ts`. This is a workaround for a Turbopack bug on Windows where Sass fails to resolve sibling imports (e.g. `@import 'vars'`) due to missing `includePaths` and backslash path issues (vercel/next.js#86431). - Expands the `lint:scss` script glob to also cover `templates/**/*.scss`, so the existing `no-tilde-imports` stylelint rule (added in #15028) catches template files going forward. Fixes #16059 ## Disclaimer This bug only reproduces on Windows. We are a Mac-only team and have not been able to reproduce it locally, but the fix aligns with the confirmed community workaround and is consistent with the changes already applied to `packages/ui` in #15028. If the next release still does not resolve the issue for Windows users, I am happy to quickly explore a follow-up PR. ## Test plan - [x] Verify `pnpm run lint:scss` passes (no tilde imports detected) - [ ] Windows users: run `npx create-payload-app@latest -t website` and confirm `npm run dev` no longer throws `Can't find stylesheet to import` - [x] Verify templates still compile correctly on macOS/Linux (no regressions from `loadPaths` addition) Co-authored-by: German Jablonski <GermanJablo@users.noreply.github.com>

…Windows (payloadcms#16295) ## Summary - Removes deprecated tilde (`~`) prefix from `@import` statements in all template SCSS files (`website`, `with-vercel-website`, `ecommerce`). The tilde syntax relies on legacy Webpack resolution behavior and is not supported by Turbopack, which is the default bundler in Next.js 16. - Adds `sassOptions.loadPaths` pointing to `@payloadcms/ui/dist/scss/` in each template's `next.config.ts`. This is a workaround for a Turbopack bug on Windows where Sass fails to resolve sibling imports (e.g. `@import 'vars'`) due to missing `includePaths` and backslash path issues (vercel/next.js#86431). - Expands the `lint:scss` script glob to also cover `templates/**/*.scss`, so the existing `no-tilde-imports` stylelint rule (added in payloadcms#15028) catches template files going forward. Fixes payloadcms#16059 ## Disclaimer This bug only reproduces on Windows. We are a Mac-only team and have not been able to reproduce it locally, but the fix aligns with the confirmed community workaround and is consistent with the changes already applied to `packages/ui` in payloadcms#15028. If the next release still does not resolve the issue for Windows users, I am happy to quickly explore a follow-up PR. ## Test plan - [x] Verify `pnpm run lint:scss` passes (no tilde imports detected) - [ ] Windows users: run `npx create-payload-app@latest -t website` and confirm `npm run dev` no longer throws `Can't find stylesheet to import` - [x] Verify templates still compile correctly on macOS/Linux (no regressions from `loadPaths` addition) Co-authored-by: German Jablonski <GermanJablo@users.noreply.github.com>

fix(ui): invalid sass imports to support windows

4373093

Fixes invalid Sass import paths in the compiled @payloadcms/ui output that currently rely on legacy webpack resolution behavior.

rubixvi requested review from AlessioGr, JarrodMFlesch and jacobsfletch as code owners December 23, 2025 23:32

github-actions Bot added the created-by: Contributor label Dec 23, 2025

rubixvi mentioned this pull request Dec 27, 2025

Modular Dashboard Sass issue #15011

Closed

GermanJablo added 2 commits January 5, 2026 14:56

chore: add stylelint to prevent tilde imports

d88a159

Merge branch 'eslint-import' into pr/rubixvi/15028

1b43987

Copilot AI review requested due to automatic review settings January 5, 2026 14:59

GermanJablo requested a review from denolfe as a code owner January 5, 2026 14:59

Copilot started reviewing on behalf of GermanJablo January 5, 2026 14:59 View session

GermanJablo changed the title ~~fix(ui): invalid sass imports to support windows~~ fix(ui): invalid sass imports to support windows - add Stylelint to prevent regression Jan 5, 2026

Copilot AI reviewed Jan 5, 2026

View reviewed changes

Comment thread packages/ui/src/widgets/CollectionCards/index.scss Outdated

Update packages/ui/src/widgets/CollectionCards/index.scss

4f59b5a

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

GermanJablo self-assigned this Jan 5, 2026

GermanJablo approved these changes Jan 5, 2026

View reviewed changes

GermanJablo merged commit c66e953 into payloadcms:main Jan 5, 2026
288 of 294 checks passed

GermanJablo mentioned this pull request Jan 7, 2026

fix: remove tilde imports in scss files #15105

Closed

bormm mentioned this pull request Apr 15, 2026

Sass issue #16059

Closed

GermanJablo mentioned this pull request Apr 16, 2026

fix(templates): remove tilde SCSS imports and add Sass loadPaths for Windows #16295

Merged

3 tasks

Conversation

rubixvi commented Dec 23, 2025

Uh oh!

Riya922003 commented Dec 28, 2025

Uh oh!

hoapooh commented Jan 3, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

GermanJablo left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions Bot commented Jan 5, 2026

Uh oh!

GermanJablo commented Jan 5, 2026

Uh oh!

rubixvi commented Jan 5, 2026

Uh oh!

cameronrdecker commented Jan 6, 2026

Uh oh!

rubixvi commented Jan 6, 2026

Uh oh!

cameronrdecker commented Jan 6, 2026

Uh oh!

rubixvi commented Jan 6, 2026

Uh oh!

GermanJablo commented Jan 7, 2026

Uh oh!

cameronrdecker commented Jan 7, 2026

Uh oh!

samuel-lf commented Jan 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pratik-dyna123 commented Mar 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

bormm commented Apr 9, 2026

Uh oh!

dminhhoang26 commented Apr 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

juhrlass commented Apr 12, 2026

Uh oh!

bormm commented Apr 15, 2026

Uh oh!

bormm commented Apr 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

GermanJablo commented Apr 16, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

11 participants

samuel-lf commented Jan 30, 2026 •

edited

Loading

pratik-dyna123 commented Mar 30, 2026 •

edited

Loading

dminhhoang26 commented Apr 10, 2026 •

edited

Loading

bormm commented Apr 15, 2026 •

edited

Loading