fix(ui): invalid sass imports to support windows - add Stylelint to prevent regression

[rubixvi]

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

Fixes issue #15011

./nodemodules/.pnpm/@[email protected]@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.

[Riya922003]

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

[hoapooh]

@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.

[GermanJablo]

Thank you!

[github-actions]

🚀 This is included in version v3.70.0

[GermanJablo]

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]

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.

[cameronrdecker]

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]

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]

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]

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]

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]

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.