Next.js Discord

Discord Forum

Turbopack source maps showing wrong filename with @use/@forward SCSS structure

Unanswered
Xanado posted this in #help-forum
Open in Discord
I'm running into an issue with CSS source maps in Next.js 16 using Turbopack in local development.
Setup:

Next.js 16
Turbopack (local dev)
SASS V1.97 with @use and @forward (migrated from deprecated @import)

Problem:
The CSS source maps are partially broken. When inspecting elements in DevTools:

- The line number is correct
- It points to the right line in the correct file
- But the filename is always showing as index.scss (my main SCSS file where all the @use statements are)

So instead of seeing something like components/button.scss:24, I'm seeing index.scss:24 even though line 24 actually corresponds to the correct line in button.scss.
Example structure:
scss// index.scss
@use './components/button';
@use './components/header';
// etc.
Has anyone else experienced this with Turbopack and the newer SCSS module system? Is this a known limitation or is there a configuration I'm missing?
Any help would be appreciated!

2 Replies

Fallowing this issue, i invistigated and found out that we didnt have sourcemaps enabled in turbopack in the latest version 16.1.1. I saw that in v16.1.1-canary.14 that turbopack now populate the name field fore sourcemaps in this [PR](https://github.com/vercel/next.js/pull/87911). So i did some digging in the code and found out that we always set the first index in turbopack/crates/turbopack-css/src/process.rs.
I donnt know the procedure but i propose this PR to have sourcemaps configurable via the next config [PR](https://github.com/vercel/next.js/pull/88225)
For info: I eventually created an [issue ](https://github.com/vercel/next.js/issues/88294) with the bug reproduction and the fix