Turbopack source maps showing wrong filename with @use/@forward SCSS structure
Unanswered
Chum salmon posted this in #help-forum
Chum salmonOP
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!
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!