Turbopack on Windows: Sass @use/@forward imports fail to resolve paths correctly #87243
Description
Link to the code that reproduces this issue
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
- 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
- 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
- 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/AWhich 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.