Build failure when using sassOptions.additionalData with Next 16.0.8

[hermanndettmann]

Describe the Bug

Hey Payload Team,

I build some first projects with Payload and I must say that I'm a very happy user of your elegant piece of software! So far everything went smoothly and I'm actually already close to the finish line with my first Payload project. Unfortunately even the greatest software isn't save from having bugs so here I am and I hope you can help me.

In my project I use Bootstrap as a foundation for styling the frontend and for that I want to have some common functions, mixins and variables available in every component that I use without having to re-import them in every components stylesheet again. For this I use sassOptions.additionalData in the next.config.ts to add these some @use statements not only for bootstrap but also some of my own variable SCSS files liek this:

const nextConfig: NextConfig = {
  output: 'standalone',
  sassOptions: {
    additionalData: `
      @use "src/styles/_bootstrap.scss" as bs;
      @use "src/styles/variables/_colors.scss";
    `,
  },
}

This actually worked quite well so far but since I upgraded the project to Next 16 this seem to create an issue with the Payload app. If you open http://localhost:3000 everything works as expected but as soon as move to http://localhost:3000/admin or any other /admin related route you'll see the following:

For some reason it tries to find these files within the Payload frontend and I don't know why. The only way to fix that for now is to remove sassOptions.additionalData from the Next config and add the statements manually to each component. But I would be really happy if I can keep using sassOptions.additionalData like that instead and not having to copy the same @use statements over and over again.

I'm looking forward to any help here and hope that can be fixed. Thank you in advance!

Link to the code that reproduces this issue

https://github.com/hermanndettmann/payload-next-sass-options-reproduction

Reproduction Steps

1. Install dependencies
2. Run pnpm dev.
3. Go to /admin

Which area(s) are affected?

area: ui

Environment Info

Binaries:
  Node: 22.16.0
  npm: 10.9.2
  Yarn: N/A
  pnpm: 10.11.1
Relevant Packages:
  payload: 3.68.2
  next: 16.0.8
  @payloadcms/db-sqlite: 3.68.2
  @payloadcms/next/utilities: 3.68.2
  @payloadcms/richtext-lexical: 3.68.2
  @payloadcms/ui/shared: 3.68.2
  react: 19.2.1
  react-dom: 19.2.1
Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 25.1.0: Mon Oct 20 19:34:05 PDT 2025; root:xnu-12377.41.6~2/RELEASE_ARM64_T6041
  Available memory (MB): 24576
  Available CPU cores: 14

[cbratschi]

@hermanndettmann this is a Next.js Turbopack issue: vercel/next.js#85424

This is not related to Payload.

[cbratschi]

And this issue is the same: vercel/next.js#86431

[hermanndettmann]

Thanks @cbratschi for the hint!

[cbratschi]

Still using 15.x with Webpack because of this Sass issue. Next 16.x is not yet fully supported by Payload.