Turbopack on Windows: Sass @use/@forward imports fail to resolve paths correctly
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 142k
- Forks
- 32.4k
- Avg merge
- 2d 14h
- Merged PRs (30d)
- 351
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/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.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce on Windows 10/11 with the linked reproduction, using src/style.scss and a package such as ag-grid-community, then compare npm run dev with next dev --webpack. Inspect the Turbopack Sass integration and next.config.ts sassOptions behavior, including the @forward case in src/styles/_breakpoints.scss; done means relative @use/@forward imports and configured includePaths resolve under Windows.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, nextjs, sass
- Domain
- build-system
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100