Layout.css not pulling in map from external package css import

[Huink7]

Link to the code that reproduces this issue

https://github.com/Huink7/css-map-reproduction

To Reproduce

1. Include an external minified css file that includes a comment for source map in layout.tsx
2. Start next dev (in safari with css source maps enabled)
3. Observe

Current vs. Expected behavior

Safari tries to continually import layout.css and can't find the map.css. In our app (not the minimal reproducible) safari keeps trying to load layout.css and ends up importing multiple. I'm not entirely sure what would cause it to do that. However, in the min reproduction it does only happen once.

Example error:
Source Map loading errors
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:3000/_next/static/css/app/bootstrap.min.css.map

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.5.0: Tue Apr 22 19:54:49 PDT 2025; root:xnu-11417.121.6~2/RELEASE_ARM64_T6000
  Available memory (MB): 32768
  Available CPU cores: 10
Binaries:
  Node: 22.15.0
  npm: 10.9.2
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 15.3.3 // No Next.js version data was found.
  eslint-config-next: 15.3.3
  react: 19.1.0
  react-dom: 19.1.0
  typescript: 5.7.3
Next.js Config:
  output: N/A

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

CSS

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

next dev (local)

Additional context

No response

[swesh]

@Huink7 is it happening only in safari ?
I tried the steps which you mentioned in chrome and edge, couldn't find any broken requests.

[Huink7]

@Huink7 is it happening only in safari ? I tried the steps which you mentioned in chrome and edge, couldn't find any broken requests.

When I did the minimal reproduction I was only able to see the error in Safari. However, It's worth noting that in another application that I can't post the code for, something is happening that is causing it to request layout.css continuously in safari and in that applications case it also shows in chrome.

[swesh]

can you try including external css.map in another css or scss file, then include this file in layout.

[Huink7]

If I understand your suggestion correctly, we would then have two external css or SCSS files in layout.tsx that both have an external css.map referenced in the file? If that is the case, in our other app we have that and are running in to the same issue.

[5shine1]

I just tested this and saw the same thing in Safari. When the minified CSS file has a sourceMappingURL comment but the .map file isn’t available, Safari tries to load it and throws a 404. In my case, it only happens once in the minimal repro, but in a bigger app I’ve seen it keep retrying too.
It doesn’t seem to affect Chrome or Firefox the same way — they log the missing map in the console but don’t keep requesting it.
As a quick fix, removing the sourceMappingURL comment or actually including the .map file helps. Maybe Next.js could handle this more gracefully in dev mode, like ignoring or warning about missing source maps?
Appreciate the minimal repo — super helpful!