fix(ui): use explicit relative paths for internal SCSS imports v3.x (#16827)

haxllo · web-flow · commit c039e55e8016 · 2026-06-06T18:26:43.000-07:00
### What? Replace bare `@import` statements in `@payloadcms/ui` SCSS entry points with explicit `./`-prefixed relative paths. Three files changed, **+9 / -9 lines** on `3.x`. | File | Imports fixed | |---|---| | `packages/ui/src/scss/styles.scss` | `vars`, `z-index`, `type`, `queries`, `resets`, `svg` | | `packages/ui/src/scss/toastify.scss` | `vars`, `queries` | | `packages/ui/src/scss/app.scss` | `styles` | ### Why? Bare `@import` resolution depends on the Sass loader adding the current file's directory to the load path. This is true for the legacy `node-sass` and some `sass-loader` configurations, but **not** for: - Turbopack + `resolve-url-loader` (Next.js 16 default) - Some webpack `sass-loader` setups with restricted `include` paths - Standalone `sass` CLI runs that don't pre-add the SCSS directory In those environments, the build fails with: ``` Error evaluating Node.js code Error: Can't find stylesheet to import. ╷ 1 │ @import 'vars'; │ ^^^^^^╡ ``` The `dist/` published to npm is built from these `src/` files via `pnpm copyfiles`, so every released 3.x version ships the same fragile dist. Today the only working workaround is a downstream `pnpm.patchedDependencies` patch (see #15011$ ### How? Mechanical, byte-for-byte equivalent refactor: prefix each internal bare `@import` with `./`. No new files, no deletions, no JS / TS / API changes. Output CSS is identical. ```diff -@import 'vars'; +@import './vars'; ``` After this lands, downstream projects can drop the `pnpm patch` workaround and bump to the next 3.x release. ### Reproduction (before) 1. `npx create-payload-app@latest` (any 3.x template) 2. 2. `pnpm install && pnpm dev` 3. Open the admin panel Result on Windows + Next.js 16 + Turbopack: admin panel fails to render, log shows the `@import 'vars'` error. Confirmed in #15011 and a follow-up in #16037. ### Reproduction (after) Same steps - admin panel renders cleanly. `pnpm.patchedDependencies` patch is no longer required. ### Backward compatibility Pure SCSS source refactor. Compiled CSS is byte-identical. No runtime, API, or public surface change. Safe for patch releases. Related #16037, #15011
diff --git a/packages/ui/src/scss/app.scss b/packages/ui/src/scss/app.scss
@@ -1,6 +1,6 @@
 @layer payload-default, payload;
 
-@import 'styles';
+@import './styles';
 @import './toasts.scss';
 @import './colors.scss';
 
diff --git a/packages/ui/src/scss/styles.scss b/packages/ui/src/scss/styles.scss
@@ -1,11 +1,11 @@
-@import 'vars';
-@import 'z-index';
+@import './vars';
+@import './z-index';
 
 //////////////////////////////
 // IMPORT OVERRIDES
 //////////////////////////////
 
-@import 'type';
-@import 'queries';
-@import 'resets';
-@import 'svg';
+@import './type';
+@import './queries';
+@import './resets';
+@import './svg';
diff --git a/packages/ui/src/scss/toastify.scss b/packages/ui/src/scss/toastify.scss
@@ -1,5 +1,5 @@
-@import 'vars';
-@import 'queries';
+@import './vars';
+@import './queries';
 
 @layer payload-default {
   .Toastify {
