Link to the code that reproduces this issue

https://codesandbox.io/p/sandbox/github/vercel/next.js/tree/canary/examples/reproduction-template-pages

To Reproduce

Link to the code that reproduces this issue
This issue can be reproduced in any Next.js 16 project on Windows that uses:
Sass files with @use or @forward statements
Third-party packages with Sass files (e.g., ag-grid-community, bootstrap)
To Reproduce
Use Windows 10/11
Create a Next.js 16 project with Sass
Install a package that uses Sass internally (e.g., ag-grid-community)
Import the package's Sass styles
Run npm run dev (Turbopack)
Minimal reproduction:
// src/style.scss @use 'ag-grid-community/styles' as ag;
// src/style.scss @use 'ag-grid-community/styles' as ag;

Current vs. Expected behavior

Current behavior: Build fails with errors like:
Error evaluating Node.js code Error: Can't find stylesheet to import. ╷ 12 │ @use './css-content'; │ ^^^^^^^^^^^^^^^^^^^^ ╵ node_modules\ag-grid-community\styles\_index.scss 12:1 @use

The error occurs because Turbopack cannot resolve relative @use imports (./css-content) inside node_modules packages on Windows.
Expected behavior: Sass imports should resolve correctly, as they do:
On Linux/macOS with Turbopack
On Windows with Webpack (next dev --webpack)
Additional Issues Discovered

1. Relative paths in @forward chains fail
   When a Sass file is loaded through an @forward chain, relative imports within that file fail:

`// src/styles.scss
@forward 'styles/breakpoints'; // forwards src/styles/_breakpoints.scss

// src/styles/_breakpoints.scss
@use './rem' as *; // FAILS - cannot find ./rem even though _rem.scss exists in same directory`

The error occurs because Turbopack cannot resolve relative @use imports (./css-content) inside node_modules packages on Windows.
Expected behavior: Sass imports should resolve correctly, as they do:
On Linux/macOS with Turbopack
On Windows with Webpack (next dev --webpack)
Additional Issues Discovered

1. Relative paths in @forward chains fail
   When a Sass file is loaded through an @forward chain, relative imports within that file fail:

`// src/styles.scss
@forward 'styles/breakpoints'; // forwards src/styles/_breakpoints.scss

// src/styles/_breakpoints.scss
@use './rem' as *; // FAILS - cannot find ./rem even though _rem.scss exists in same directory`

Error: Can't find stylesheet to import. ╷ 2 │ @use './rem' as *; │ ^^^^^^^^^^^^^^^^^ ╵ src\styles\_breakpoints.scss 2:1 @forward src\styles.scss 2:1 @use

2. sassOptions.includePaths doesn't work with Turbopack
   Configuring sassOptions in next.config.ts has no effect when using Turbopack:

// next.config.ts const nextConfig: NextConfig = { sassOptions: { includePaths: [path.join(__dirname, 'src/styles'), path.join(__dirname, 'src')], }, // ... }

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11
Binaries:
  Node: 24.x
  npm: 11.x
Relevant Packages:
  next: 16.0.10
  react: 19.x
  sass: 1.95.0
  ag-grid-community: 34.3.1
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Turbopack

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

Related Issues
#86431 - NextJS 16 version of turbopack failing to resolve bootstrap imports on Windows

Root Cause Analysis
The issue appears to be in how Turbopack's Sass integration resolves file paths on Windows:
Backslash vs forward slash handling: Windows uses \ as path separator, but Sass expects / in import paths
Working directory context: When processing @forward chains, the working directory for resolving relative paths may be incorrect
node_modules resolution: Turbopack fails to resolve relative imports within packages in node_modules
This issue does not occur on Linux/macOS, suggesting it's specific to Windows path handling in Turbopack's Sass loader.

Describe the Bug

As previously discussed in issue #15011, a Sass issue is present directly after creating a new project, which makes the app unusable, however only with the website template. The blank template works fine now.

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

Link to the code that reproduces this issue

https://github.com/ondrejnedoma/payload-website-template-bug

Reproduction Steps

1. Create the app using npx create-payload-app@latest -t website
2. Run npm run dev
3. Open the website and observe the error

Which area(s) are affected?

area: templates

Environment Info

Binaries:
  Node: 22.13.1
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  payload: 3.80.0
  next: 16.2.1
  @payloadcms/db-mongodb: 3.80.0
  @payloadcms/graphql: 3.80.0
  @payloadcms/live-preview: 3.80.0
  @payloadcms/live-preview-react: 3.80.0
  @payloadcms/next/utilities: 3.80.0
  @payloadcms/plugin-form-builder: 3.80.0
  @payloadcms/plugin-nested-docs: 3.80.0
  @payloadcms/plugin-redirects: 3.80.0
  @payloadcms/plugin-search: 3.80.0
  @payloadcms/plugin-seo: 3.80.0
  @payloadcms/richtext-lexical: 3.80.0
  @payloadcms/translations: 3.80.0
  @payloadcms/ui/shared: 3.80.0
  react: 19.2.4
  react-dom: 19.2.4
Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Pro
  Available memory (MB): 16250
  Available CPU cores: 12